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

IT技术 javascript jquery html jquery-selectors radio-button
2021-02-01 05:58:59

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

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

$("form :radio")

我怎么知道选择了哪一个?

6个回答

要获取带有 id 的表单所选 radioName项目的值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>

对于非 jquery 版本,请参见此处:jsfiddle.net/2y76vp1e
2021-03-11 05:58:59
请注意,在 onChange 方法示例中,您还可以使用 this.value 而不是 $('input[name=radioName]:checked', '#myForm').val() :)
2021-03-15 05:58:59
@ ZeroNine,我使用的 Symfony 框架也是如此。
2021-03-23 05:58:59
只是要添加这个,因为它可能会帮助某人。如果收音机的名称有像 radioName[0] 这样的括号(有时在 Wordpress 中使用),您将需要在名称周围使用引号,例如 input[name='radioName[0]']:checked
2021-04-01 05:58:59

用这个..

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

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

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

这应该有效:

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

注意 input:checked 周围使用的 "" 而不是 '' 像 Peter J 的解决方案

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

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