在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(){});

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

应该做到这一点，所有这些都在文档中，该文档具有与此类似的示例：

$("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();
});

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

更新：发布后，我认为上述Paolo的答案更好，因为它使用的DOM遍历更少。我让这个答案站起来，因为它显示了如何以跨浏览器兼容的方式获取所选元素。

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

另一种方式

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

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

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

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

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

谢谢阿德南

从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自述变化和门票具体的这种变化，以及一个明白，为什么上：无线电选择页面下的附加信息部分。

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

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

jsfiddle

有关当前答案的性能概述，请点击此处

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

alert（$（“ input：radio：checked”）。val（））;

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

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

这是小提琴网址

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

<input type="radio" name="ans3" value="help"> 
<input type="radio" name="ans3" value="help1">
<input type="radio" name="ans3" value="help2">

<input type="radio" name="ans2" value="test"> 
<input type="radio" name="ans2" value="test1">
<input type="radio" name="ans2" value="test2">

<script type="text/javascript">
  var ans3 = jq("input[name='ans3']:checked").val()
  var ans2 = jq("input[name='ans2']:checked").val()
</script>

如果您想要一个真/假值，请使用以下命令：

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

像这样的东西？

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

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

如果您在同一页面上有多个单选按钮，则也可以尝试以下操作以获取单选按钮的值：

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

干杯!

也可以使用CSS类定义单选按钮的范围，然后使用以下命令确定值

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

这对我有用。

HTML：

<input type="radio" class="radioClass" name="radioName" value="1" />Test<br/>
<input type="radio" class="radioClass" name="radioName" value="2" />Practice<br/>
<input type="radio" class="radioClass" name="radioName" value="3" />Both<br/>

jQuery：

    $（“。radioClass”）。each（function（）{
        if（$（this）.is（'：checked'））
        alert（$（this）.val（））;
    }）;

希望能帮助到你..

$('input:radio[name=theme]').bind(
  'click',
  function(){
    $(this).val();
});

您可能会注意到使用类选择器来获取 ASP.NET RadioButton控件的值始终为空，这就是原因。

您可以通过以下方式创建RadioButton控件ASP.NET：

<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为您呈现以下HTMLRadioButton

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

因为ASP.NET我们不想使用RadioButton控件名称或id，因为它们可以出于用户的任何原因而更改（容器名称，表单名称，用户控件名称等），如您在上面的代码中所见。

获取RadioButton使用jQuery 的值的唯一可行的剩余方法是使用css类，如对此完全不相关的问题的答案中所述，如下所示

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