我如何知道通过 jQuery 选择了哪个单选按钮？

Posted 2023-03-05

【中文标题】我如何知道通过 jQuery 选择了哪个单选按钮？

【英文标题】：How can I know which radio button is selected via jQuery?

【发布时间】：2010-10-10 10:16:38

【问题描述】：

我有两个单选按钮，想要发布所选单选按钮的值。 如何使用 jQuery 获取值？

我可以像这样得到所有这些：

$("form :radio")

我怎么知道哪个被选中了？

【参考方案1】：

要获取id为myForm的表单的selected radioName项的值：

$('input[name=radioName]:checked', '#myForm').val()

这是一个例子：

$('#myForm input').on('change', function() 
   alert($('input[name=radioName]:checked', '#myForm').val()); 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input type="radio" name="radioName" value="1" /> 1 <br />
  <input type="radio" name="radioName" value="2" /> 2 <br />
  <input type="radio" name="radioName" value="3" /> 3 <br />
</form>

【讨论】：

只是添加这个，因为它可能对某人有帮助。如果收音机的名称带有方括号，例如 radioName[0]（有时在 Wordpress 中使用），您需要在名称周围使用引号，例如 input[name='radioName[0]']:checked

请注意，在 onChange 方法示例中，您还可以使用 this.value 代替 $('input[name=radioName]:checked', '#myForm').val() :)

对于非 jquery 版本，请参见此处：jsfiddle.net/2y76vp1e

@ZeroNine，在我使用的 Symfony 框架中也是如此。

【参考方案2】：

您可以将 :checked 选择器与单选选择器一起使用。

 $("form:radio:checked").val();

【讨论】：

这看起来不错，但是，jQuery documentation 建议使用 [type=radio] 而不是 :radio 以获得更好的性能。这是可读性和性能之间的权衡。在这些琐碎的事情上，我通常将可读性置于性能之上，但在这种情况下，我认为 [type=radio] 实际上更清晰。所以在这种情况下，它看起来像 $("form input[type=radio]:checked").val()。不过仍然是一个有效的答案。

【参考方案3】：

使用这个..

$("#myform input[type='radio']:checked").val();

【参考方案4】：

在 JSF 生成的单选按钮中（使用<h:selectOneRadio> 标签），您可以这样做：

radiobuttonvalue = jQuery("input[name='form_id\:radiobutton_id']:checked").val();

其中 selectOneRadio ID 为 radiobutton_id，表单 ID 为 form_id。

请务必使用 name 而不是 id，因为 jQuery 使用此属性（name 由 JSF 自动生成，类似于控件 ID )。

【参考方案5】：

$("input:radio:checked").val();

【参考方案6】：

如果您已经引用了单选按钮组，例如：

var myRadio = $("input[name=myRadio]");

使用filter() 函数，而不是find()。 （find() 用于定位子/后代元素，而filter() 搜索您选择的***元素。）

var checkedValue = myRadio.filter(":checked").val();

---

注意：这个答案最初是为了纠正另一个建议使用find() 的答案，该答案似乎已被更改。 find() 对于已经引用容器元素但没有单选按钮的情况仍然有用，例如：

var form = $("#mainForm");
...
var checkedValue = form.find("input[name=myRadio]:checked").val();

【参考方案7】：

这应该有效：

$("input[name='radioName']:checked").val()

注意输入周围使用的“”：已检查，而不是像 Peter J 的解决方案那样 ''

【参考方案8】：

获取所有收音机：

var radios = jQuery("input[type='radio']");

过滤以获取选中的那个

radios.filter(":checked")

【参考方案9】：

另一种选择是：

$('input[name=radioName]:checked').val()

【讨论】：

这里不需要 ":radio" 部分。

【参考方案10】：

另外，检查用户是否没有选择任何东西。

var radioanswer = 'none';
if ($('input[name=myRadio]:checked').val() != null)            
   radioanswer = $('input[name=myRadio]:checked').val();

【参考方案11】：

如果你有多个单选按钮，那么

var myRadio1 = $('input[name=radioButtonName1]');
var value1 = myRadio1.filter(':checked').val();

var myRadio2 = $('input[name=radioButtonName2]');
var value2 = myRadio2.filter(':checked').val();

这对我有用。

【参考方案12】：

 $(".Stat").click(function () 
     var rdbVal1 = $("input[name$=S]:checked").val();
 

【参考方案13】：

在我的例子中，我在一个表单中有两个单选按钮，我想知道每个按钮的状态。 这对我有用：

// get radio buttons value
console.log( "radio1: " +  $('input[id=radio1]:checked', '#toggle-form').val() );
console.log( "radio2: " +  $('input[id=radio2]:checked', '#toggle-form').val() );


    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="toggle-form">
  <div id="radio">
    <input type="radio" id="radio1" name="radio" checked="checked" /><label for="radio1">Plot single</label>
    <input type="radio" id="radio2" name="radio"/><label for="radio2">Plot all</label>
  </div>
</form>

【讨论】：

每个按钮的状态是什么意思？同名的单选按钮只允许选中一个，因此，如果您选中了一个，则其余的都未选中。

【参考方案14】：

以下是我将如何编写表单并处理获取已检查收音机的方法。

使用名为 myForm 的表单：

<form id='myForm'>
    <input type='radio' name='radio1' class='radio1' value='val1' />
    <input type='radio' name='radio1' class='radio1' value='val2' />
    ...
</form>

从表单中获取值：

$('#myForm .radio1:checked').val();

如果您不发布表单，我会通过以下方式进一步简化：

<input type='radio' class='radio1' value='val1' />
<input type='radio' class='radio1' value='val2' />

那么获取校验值就变成了：

    $('.radio1:checked').val();

在输入上有一个类名可以让我轻松地为输入设置样式...

【参考方案15】：

获取使用类的选定单选的值：

$('.class:checked').val()

【参考方案16】：

我编写了一个用于设置和获取单选按钮值的 jQuery 插件。它也尊重他们的“改变”事件。

(function ($) 

    function changeRadioButton(element, value) 
        var name = $(element).attr("name");
        $("[type=radio][name=" + name + "]:checked").removeAttr("checked");
        $("[type=radio][name=" + name + "][value=" + value + "]").attr("checked", "checked");
        $("[type=radio][name=" + name + "]:checked").change();
    

    function getRadioButton(element) 
        var name = $(element).attr("name");
        return $("[type=radio][name=" + name + "]:checked").attr("value");
    

    var originalVal = $.fn.val;
    $.fn.val = function(value) 

        //is it a radio button? treat it differently.
        if($(this).is("[type=radio]")) 

            if (typeof value != 'undefined') 

                //setter
                changeRadioButton(this, value);
                return $(this);

             else 

                //getter
                return getRadioButton(this);

            

         else 

            //it wasn't a radio button - let's call the default val function.
            if (typeof value != 'undefined') 
                return originalVal.call(this, value);
             else 
                return originalVal.call(this);
            

        
    ;
)(jQuery);

将代码放在任何地方以启用插件。那就尽情享受吧！它只是覆盖了默认的 val 函数而不破坏任何东西。

您可以访问这个 jsFiddle 来试用它，看看它是如何工作的。

Fiddle

【参考方案17】：

使用这个：

value = $('input[name=button-name]:checked').val();

【参考方案18】：

如果您在 1 个表单上只有一组单选按钮，则 jQuery 代码就像这样简单：

$( "input:checked" ).val()

【参考方案19】：

如果您只需要布尔值，即是否已检查，请尝试以下操作：

$("#Myradio").is(":checked")

【参考方案20】：

要检索 javascript 数组中的所有单选按钮值，请使用以下 jQuery 代码：

var values = jQuery('input:checkbox:checked.group1').map(function () 
    return this.value;
).get();

【讨论】：

单选按钮与复选框不同。此示例使用复选框。

【参考方案21】：

我已经发布了一个库来帮助解决这个问题。实际上，提取所有可能的输入值，但还包括选中了哪个单选按钮。你可以在https://github.com/mazondo/formalizedata查看它

它会给你一个答案的 js 对象，所以一个像这样的形式：

<form>
<input type="radio" name"favorite-color" value="blue" checked> Blue
<input type="radio" name="favorite-color" value="red"> Red
</form>

会给你：

$("form").formalizeData()

  "favorite-color" : "blue"

【参考方案22】：

我使用这个简单的脚本

$('input[name="myRadio"]').on('change', function() 
  var radioValue = $('input[name="myRadio"]:checked').val();        
  alert(radioValue); 
);

【讨论】：

如果您希望它在所有浏览器中工作，请使用 click 事件而不是 change 事件

【参考方案23】：

这很好用

$('input[type="radio"][class="className"]:checked').val()

Working Demo

:checked 选择器适用于 checkboxes、radio buttons 和选择元素。仅对于选择元素，使用:selected 选择器。

API for :checked Selector

【参考方案24】：

从this question 开始，我想出了另一种方法来访问当前选定的input，当您处于相应标签的click 事件中时。原因是新选择的input 直到其label 的点击事件之后才更新。

TL;DR

$('label').click(function() 
  var selected = $('#' + $(this).attr('for')).val();

  ...
);

$(function() 
  // this outright does not work properly as explained above
  $('#reported label').click(function() 
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    $('.query[data-method="click event"]').html(query + ' at ' + time);
  );

  // this works, but fails to update when same label is clicked consecutively
  $('#reported input[name="filter"]').on('change', function() 
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    $('.query[data-method="change event"]').html(query + ' at ' + time);
  );

  // here is the solution I came up with
  $('#reported label').click(function() 
    var query = $('#' + $(this).attr('for')).val();
    var time = (new Date()).toString();

    $('.query[data-method="click event with this"]').html(query + ' at ' + time);
  );
);

input[name="filter"] 
  display: none;

#reported label 
  background-color: #ccc;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;

.query 
  padding: 5px;
  margin: 5px;

.query:before 
  content: "on " attr(data-method)": ";

[data-method="click event"] 
  color: red;

[data-method="change event"] 
  color: #cc0;

[data-method="click event with this"] 
  color: green;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reported">
  <input type="radio" name="filter" id="question" value="questions" checked="checked">
  <label for="question">Questions</label>

  <input type="radio" name="filter" id="answer" value="answers">
  <label for="answer">Answers</label>

  <input type="radio" name="filter" id="comment" value="comments">
  <label for="comment">Comments</label>

  <input type="radio" name="filter" id="user" value="users">
  <label for="user">Users</label>

  <input type="radio" name="filter" id="company" value="companies">
  <label for="company">Companies</label>

  <div class="query" data-method="click event"></div>
  <div class="query" data-method="change event"></div>
  <div class="query" data-method="click event with this"></div>
</form>

【参考方案25】：

$(function () 
// Someone has clicked one of the radio buttons
var myform= 'form.myform';
$(myform).click(function () 
    var radValue= "";
    $(this).find('input[type=radio]:checked').each(function () 
        radValue= $(this).val();
    );
  )
);

【参考方案26】：

试试看-

var radioVal = $("#myform").find("input[type='radio']:checked").val();

console.log(radioVal);

【参考方案27】：

演示：https://jsfiddle.net/ipsjolly/xygr065w/

	$(function()
	    $("#submit").click(function()      
	        alert($('input:radio:checked').val());
	    );
	 );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
       <tr>
         <td>Sales Promotion</td>
         <td><input type="radio" name="q12_3" value="1">1</td>
         <td><input type="radio" name="q12_3" value="2">2</td>
         <td><input type="radio" name="q12_3" value="3">3</td>
         <td><input type="radio" name="q12_3" value="4">4</td>
         <td><input type="radio" name="q12_3" value="5">5</td>
      </tr>
    </table>
<button id="submit">submit</button>

【参考方案28】：

我需要做的是简化 C# 代码，即尽可能在前端 JavaScript 中做。我正在使用字段集容器，因为我在 DNN 中工作并且它有自己的形式。所以我不能添加表单。

我需要测试使用了 3 个文本框中的哪个文本框，如果是，搜索的类型是什么？以值开头，包含值，值的完全匹配。

HTML：

<fieldset id="fsPartNum" class="form-inline">
<div class="form-group">
    <label for="txtPartNumber">Part Number:</label>
    <input type="text" id="txtPartNumber" class="input-margin-pn" />
</div>
<div class="form-group">
    <label for="radPNStartsWith">Starts With: </label>
    <input type="radio" id="radPNStartsWith" name="partNumber" checked  value="StartsWith"/>
</div>
<div class="form-group">
    <label for="radPNContains">Contains: </label>
    <input type="radio" id="radPNContains" name="partNumber" value="Contains" />
</div>
<div class="form-group">
    <label for="radPNExactMatch">Exact Match: </label>
    <input type="radio" id="radPNExactMatch" name="partNumber" value="ExactMatch" />
</div>

我的 JavaScript 是：

        alert($('input[name=partNumber]:checked', '#fsPartNum').val()); 
    if(txtPartNumber.val() !== '')
        message = 'Customer Part Number';
    
    else if(txtCommercialPartNumber.val() !== '')

    
    else if(txtDescription.val() !== '')

    

只要说任何带有 ID 的包含标签都可以使用。对于 DNNers，这很高兴知道。此处的最终目标是将在 SQL Server 中启动部件搜索所需的内容传递给中级代码。

这样我也不必复制以前复杂得多的 C# 代码。繁重的工作就在这里完成。

我不得不为此寻找一些东西，然后对其进行修改以使其正常工作。所以对于其他 DNN，希望这很容易找到。

【参考方案29】：

另一种获取方式：

 $("#myForm input[type=radio]").on("change",function()
   if(this.checked) 
    alert(this.value);
    
  );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
   <span><input type="radio" name="q12_3" value="1">1</span><br>
   <span><input type="radio" name="q12_3" value="2">2</span>
</form>

【参考方案30】：

你可以调用函数onChange()

  <input type="radio" name="radioName" value="1" onchange="radio_changed($(this).val())" /> 1 <br />
  <input type="radio" name="radioName" value="2" onchange="radio_changed($(this).val())"  /> 2 <br />
  <input type="radio" name="radioName" value="3"  onchange="radio_changed($(this).val())" /> 3 <br />

<script>
function radio_changed(val)
    alert(val);

</script>