在jQuery中,如何通过其name属性选择元素？

Question

我的网页上有3个单选按钮,如下所示:

<label for="theme-grey">
  <input type="radio" id="theme-grey" name="theme" value="grey" />Grey</label>
<label for="theme-pink">
  <input type="radio" id="theme-pink" name="theme" value="pink" />Pink</label>
<label for="theme-green">
  <input type="radio" id="theme-green" name="theme" value="green" />Green</label>

在jQuery中,我希望在单击这三个中的任何一个时获取所选单选按钮的值.在jQuery中我们有id(#)和class(.)选择器,但如果我想按名称找到一个单选按钮怎么办,如下所示？

$("<radiobutton name attribute>").click(function(){});

请告诉我如何解决这个问题.

Answer 1

这应该这样做,所有这些都在文档中,它有一个非常类似的例子:

$("input[type='radio'][name='theme']").click(function() {
    var value = $(this).val();
});

我还应该注意到你在该代码段中有多个相同的ID.这是无效的HTML.使用类来分组元素集,而不是ID,因为它们应该是唯一的.

Answer 2

要确定选中哪个单选按钮,请尝试以下操作:

$('input:radio[name=theme]').click(function() {
  var val = $('input:radio[name=theme]:checked').val();
});

将捕获该组中所有单选按钮的事件,并且所选按钮的值将放在val中.

更新:发布后我决定Paolo的答案更好,因为它使用少一个DOM遍历.我正在让这个答案成立,因为它展示了如何以跨浏览器兼容的方式获取所选元素.

Answer 3

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

Answer 4

其他方式

$('input:radio[name=theme]').filter(":checked").val()

Answer 5

这对我很有用.例如,您有两个具有相同"名称"的单选按钮,您只想获取已选中的按钮的值.你可以试试这个.

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

Answer 6

以下代码用于按名称获取选定的单选按钮值

jQuery("input:radio[name=theme]:checked").val();

谢谢阿德南

Answer 7

在我从jQuery的1.7.2升级到1.8.2后,我发现了这个问题,因为我正在研究错误.我正在添加我的答案,因为jQuery 1.8及更高版本发生了变化,这改变了现在回答这个问题的方式.

使用jQuery 1.8,他们已经弃用了伪选择器,如:radio,:checkbox,:text.

现在要做的上述只需更换:radio用[type=radio].

因此,您的答案现在适用于所有版本的jQuery 1.8及更高版本:

$("input[type=radio][name=theme]").click(function() { 
    var value = $(this).val(); 
}); 

您可以在附加信息部分下的:无线电选择器页面上阅读1.8自述文件的更改和此更改的特定故障单,以及理解原因.

Answer 8

对于那些不想包含库来做一些非常简单的事情的人:

document.querySelector('[name="theme"]:checked').value;

的jsfiddle

有关当前答案的性能概述,请查看此处

Answer 9

如果您想在点击事件之前知道默认选定单选按钮的值,请尝试以下操作:

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

Answer 10

如果页面上有多个无线电组,则可以使用过滤功能,如下所示

$('input[type=radio]').change(function(){
    var value = $(this).filter(':checked' ).val();
    alert(value);
});

这是小提琴网址

http://jsfiddle.net/h6ye7/67/