Javascript 在jQuery中，如何根据元素的name属性选择元素？

我的网页中有3个单选按钮，如下所示：

灰色
粉红色
绿色

像这样的东西可能吗

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

---

当您单击任何单选按钮时，我相信它最终会被选中，因此将为选中的单选按钮调用此命令。

这应该可以做到，所有这些都在中，其中有一个非常类似的示例：

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

---

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

要确定选中了哪个单选按钮，请尝试以下操作：

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

alert($("input:radio:checked").val()); 将捕获组中所有单选按钮的事件，并将所选按钮的值置于val中

---

更新：在发布之后，我认为Paolo上面的答案更好，因为它使用的DOM遍历更少。我同意这个答案，因为它显示了如何以跨浏览器兼容的方式获取选定元素。

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

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

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

---

警报（$（“输入：收音机：已选中”）.val（） 还可以使用CSS类定义单选按钮的范围，然后使用以下内容确定值

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

var ans3=jq（“输入[name='ans3']：选中”）.val（）
var ans2=jq（“输入[name='ans2']：选中”）.val（）

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

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

---

在我从jQuery的1.7.2升级到1.8.2之后，我在研究一个错误时发现了这个问题。我之所以添加我的答案，是因为jQuery1.8和更高版本中有一个变化，改变了现在回答这个问题的方式

伪选择器如：radio、：checkbox、：text

要执行上述操作，只需将

：radio

替换为

[type=radio]

因此，对于jQuery 1.8及以上的所有版本，您的答案现在变成：

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

您可以在“附加信息”部分下阅读和以及了解原因。

这对我很有用

HTML:

测试

练习

两者都

Jquery：

$（“.radioClass”）。每个（函数（）{ 如果（$（this）.is（':checked'）） 警报（$（this.val（））； });

---

希望有帮助。

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

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

谢谢

---

Adnan

如果需要真/假值，请使用以下命令：

  $("input:radio[name=theme]").is(":checked")

另一种方式

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

---

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

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

---

要查看当前答案的性能概述

I如果在同一页面上有多组单选按钮，也可以尝试此操作以获取单选按钮的值：

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

---

干杯

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

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

这里是fiddle url

---

您可能会注意到，使用类选择器获取

ASP.NET RadioButton

控件的值总是空的，原因如下

您可以在

ASP.NET

中创建

RadioButton

控件，如下所示：

<asp:RadioButton runat="server" ID="rbSingle" GroupName="Type" CssClass="radios" Text="Single" />
<asp:RadioButton runat="server" ID="rbDouble" GroupName="Type" CssClass="radios" Text="Double" />
<asp:RadioButton runat="server" ID="rbTriple" GroupName="Type" CssClass="radios" Text="Triple" />

对于

ASP.NET

我们不想使用

RadioButton

控件名称或id，因为它们可以在用户不知情的情况下进行更改（容器名称、表单名称、用户控件名称等的更改），正如您在上面的代码中所看到的那样

使用jQuery获取

RadioButton

值的唯一可行方法是使用css类，如下面回答一个完全不相关的问题时所述

$('span.radios input:radio').click(function() {
    var value = $(this).val();
});

---

从jQuery 1.3开始，@是无效的（甚至在此之前已弃用）。“旧的XPath样式属性选择器：[@attr=value]。这些属性选择器已经被弃用了很长一段时间，我们最终将它们删除。要修复它，只需删除@！”@gargantaun-如果单击单选按钮，它会发生什么情况？很好。尽管仍然不是“如何在jQuery中使用选定的radiobutton名称获取其值？”。它是“如何在使用jQuery单击时获取选定的radiobutton值？”。一个小小的差别，但让我有点困惑。根据问题，这个答案是正确的。在全局视图中，我们选择clayton的答案。从jQuery 1.8开始，使用

[type='radio']

而不是

：radio

，这样jQuery就可以利用本机DOM提供的性能提升method.@PaoloBergantino-answer是100%正确的，因为它在单击所需单选按钮后返回值。@Clayton Rabenda-answer没有给出这个值。您不必严格地指定属性“for”，只要字段包含在其对应的“label”标记SjQuery 1.8及以上版本中，就会更改此项。。。。我在下面补充了一个解释。是最好的：非jQuery一行！在我的js应用程序中使用单选按钮来维护状态。在检查此线程之前调试了一个小时。在普通JS中：

document.queryselectoral（“输入：radio[name=theme]”）.forEach（function（）{this.onclick=function（）{var value=this.value；}；}；}）根据我对问题的理解，这是我需要的答案：检查是我在等式中缺少的。谢谢。从jQuery 1.8开始，请使用
[type='radio']
而不是
：radio
，这样jQuery就可以利用本机DOM
querySelectorAll（）
方法提供的性能提升。我错误地在冒号后面和“checked”之前给了一个空格。因此，请确保没有空间。对于那些不想从单击事件处理程序中获取值的人来说，这是一个有用的答案。否则，必须使用
：checked
查找选中的按钮，例如，使用表单提交事件处理程序，其中
this
关键字未映射到单击的按钮。：checked未弃用。因此，您可以使用
$（“输入[type='radio'][name='theme']：选中”）
hmm。。我没有在你的las中修改你的代码格式吗
$('input[type=radio]').change(function(){
    var value = $(this).filter(':checked' ).val();
    alert(value);
});

<asp:RadioButton runat="server" ID="rbSingle" GroupName="Type" CssClass="radios" Text="Single" />
<asp:RadioButton runat="server" ID="rbDouble" GroupName="Type" CssClass="radios" Text="Double" />
<asp:RadioButton runat="server" ID="rbTriple" GroupName="Type" CssClass="radios" Text="Triple" />

<span class="radios"><input id="Content_rbSingle" type="radio" name="ctl00$Content$Type" value="rbSingle" /><label for="Content_rbSingle">Single</label></span>
<span class="radios"><input id="Content_rbDouble" type="radio" name="ctl00$Content$Type" value="rbDouble" /><label for="Content_rbDouble">Double</label></span>
<span class="radios"><input id="Content_rbTriple" type="radio" name="ctl00$Content$Type" value="rbTriple" /><label for="Content_rbTriple">Triple</label></span>

$('span.radios input:radio').click(function() {
    var value = $(this).val();
});