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


我的网页上有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(){});

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


324
2018-06-12 11:10


起源


您不必严格指定属性“for”,只要字段包含在相应的“label”标记之间即可 - Lucius
jQuery 1.8及以上更改了这个....我在下面添加了一个答案解释。 - klabranche
A1rPun的回答 是最好的:非jQuery单线程! - Rudey
使用单选按钮在我的js应用程序中维护状态。在检查此线程之前调试了一个小时。 看一下这个 - Prasanth
在简单的JS中: document.querySelectorAll("input:radio[name=theme]").forEach(function() { this.onclick=function() { var value = this.value; }; }); - mplungjan


答案:


这应该这样做,所有这一切都在 文件,这有一个非常类似的例子:

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

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


328
2018-06-12 11:15



@gargantaun - 如果你点击一个单选按钮,会发生什么? - Paolo Bergantino
好点子。虽然它仍然不是“如何在jQuery中使用其名称来获取选定的radiobutton值?”。这是“如何使用jQuery点击它时获得选择的radiobutton值?”。一个小小的差异,但一个让我感到困惑的一点。 - gargantuan
根据问题,这个答案是正确的。在全球视野中,我们选择了克莱顿的答案。 - krish
截至jQuery 1.8使用 [type='radio'] 代替 :radio 这样jQuery就可以利用本机DOM提供的性能提升 querySelectorAll() 方法。 - Adam
@PaoloBergantino答案100%正确,因为它在点击所需的单选按钮后返回值。@ Clayton Rabenda的答案不给出这个。 - Azam Alvi


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

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

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

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


184
2018-06-12 15:06



我不知道如何阅读这个问题,这就是我需要的答案。 :检查是我在我的等式中缺少的。谢谢。 - HPWD
截至jQuery 1.8使用 [type='radio'] 代替 :radio 这样jQuery就可以利用本机DOM提供的性能提升 querySelectorAll() 方法。 - Adam
我在结肠后给了一个空格,然后错误地“检查”了。所以请确保没有空间。 - Smoking monkey
对于那些不想从click事件处理程序获取值的人来说,这是一个有用的答案。否则,你必须使用 :checked 找到哪个按钮被选中,例如,使用表单提交事件处理程序,其中 this 关键字不会映射到单击的按钮。 - che-azeh


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

154
2018-06-04 05:42



我继续简单地说 $("input[name=theme]:checked").val(); (留下 :radio 部分出来,似乎在IE,FF,Safari和Chrome中运行良好。我不得不使用jQ v 1.3 ...当然,这意味着只有一个名为'theme'的元素 - morespace54
这是IMO的最佳答案,它说“让我知道带有这个名字的CHECKED收音机的价值”。不需要活动等 - ProVega


其他方式

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

39
2017-11-30 05:34



如果您有兴趣获取值+1,则此选项非常有用 - swapnesh
这是可靠的,因为您可以使用变量来保持单选按钮,例如 $themeRadios = $('input:radio[name=theme']) 设置任何事件处理程序,然后使用过滤器获取值,例如 $themeRadios.filter(":checked").val()。 - Joshua Pinter
我喜欢这个解决方案。 - Abel


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

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

20
2017-09-07 17:38



谢了哥们。简单易用 - Sagive SEO
这个答案优于当前接受的230+推荐答案的原因是因为这个答案也说明了用户通过键盘与单选按钮交互的时间。 - gmeben


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

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

谢谢 阿德南


14
2018-03-06 10:45



嗯..我没有修复你上次回复中的代码格式吗?请自己照顾:-) - kleopatra


在我从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自述文件 和 特定于此更改的故障单 以及理解为什么 :无线电选择器页面 在附加信息部分。


13
2017-10-03 17:02



:checked不被弃用。所以你可以使用 $("input[type='radio'][name='theme']:checked") - Adam


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

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

的jsfiddle

有关当前答案的性能概述 在这里查看


11
2017-09-30 12:34



谢谢你的回答。因为我无法以任何形式获得接受的答案。 - Chris Holmes


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

警报($( “输入:单选:检查”。)VAL());

9
2018-06-24 18:38