题 我怎么知道通过jQuery选择了哪个单选按钮?


我有两个单选按钮,想要发布所选按钮的值。 如何通过jQuery获取值?

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

$("form :radio")

我怎么知道哪一个被选中?


2293
2018-02-27 19:53


起源




答案:


获得的价值   radioName 带有id的表单项 myForm

$('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>


3535
2018-02-27 19:58



我最终使用了这个:$('form input [type = radio]:checked') - juan
@PeterJ:你为什么要使用两个参数而不是简单的 '#myform input[name=radioName]:checked'? - Sophie Alpert
在正确确定范围时,jQuery的性能最佳,而按ID选择始终是性能最高的选择器。双参数方法只是另一种方法。 - Peter J
为什么不:收音机:检查? - Bakaburg
为获得最佳性能,文档建议不要使用:无线电选择器。 api.jquery.com/radio-selector - Peter J


用这个..

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

370
2018-01-07 00:45



如果你的表单有多组单选按钮,我认为这只会得到第一组的值。 - Brad
这将仅返回在表单中检查的第一个单选按钮的值。它应该像Peter J所建议的那样完成。 - MickJ
@MickJ这段代码与Peter J的代码相同...考虑原始问题的用例。但是,如果您有各种单选按钮组,则无法使用。这就是为什么使用[name = selector]会更好的原因 - Lyth
正如@Brad所提到的,这只会获得第一组的值。你想要的是用“.map(function(){return this.value;})替换”.val()“。get();” - am_
对于它的价值,(是的,我知道在需要之前进行优化等等)但是对于纯粹的性能,这种方法更快,尤其是在旧版浏览器中: $("#myform").find("input[type='radio']:checked").val(); - Mark Schultheiss


如果您已经有对单选按钮组的引用,例如:

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();

256
2018-02-09 18:25



为了清楚起见,我只想添加find()实际搜索 所有 后代元素(与给定的选择器匹配)。如果您只想要直接孩子,请使用children()。 - Matt Browne


这应该工作:

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

请注意输入周围的“使用:检查而不是像Peter J的解决方案”


119
2018-03-30 22:29





您可以使用:checked选择器和无线电选择器。

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

69
2018-02-27 20:00



然而,这看起来不错 jQuery文档 建议使用[type = radio]而不是:radio来获得更好的性能。它是可读性和性能之间的权衡。我通常会在这些微不足道的事情上对性能进行可读性,但在这种情况下,我认为[type = radio]实际上更清晰。所以在这种情况下,它看起来像$(“表单输入[type = radio]:checked”)。val()。仍然是一个有效的答案。 - J.Money


如果你只想要布尔值,即是否检查它,请尝试:

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

42
2017-08-30 20:27





获取所有无线电:

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

过滤以获得已检查的那个

radios.filter(":checked")

42
2017-09-01 17:55





另一种选择是:

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

35
2017-09-21 19:35



这里不需要“:无线电”部分。 - Matt Browne


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

25
2017-10-16 20:20





这是我如何编写表单并处理已检查无线电的获取。

使用名为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();

在输入上有一个类名允许我轻松设置输入样式...


20
2017-09-21 16:19





在我的情况下,我有一个表单中的两个单选按钮,我想知道每个按钮的状态。 以下这个对我有用:

// 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>


18
2017-08-02 17:09



你是什​​么意思每个按钮的状态?具有相同名称的单选按钮只允许检查一个,因此,如果您获得选中的按钮,则其余按钮将被取消选中。 - Dementic