在jQuery中，如何通过名称属性选择一个元素?

I have 3 radio buttons in my web page, like below:

我的网页上有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>

In jQuery, I want to get the value of the selected radio button when any of these three are clicked. In jQuery we have id (#) and class (.) selectors, but what if I want to find a radio button by its name, as below?

在jQuery中，当单击这三个按钮时，我希望获得所选单选按钮的值。在jQuery中，我们有id(#)和class(.)选择器，但是如果我想通过它的名字找到一个单选按钮，如下面所示?

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

Please tell me how to solve this problem.

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

18 个解决方案

#1

This should do it, all of this is in the documentation, which has a very similar example to this:

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

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

I should also note you have multiple identical IDs in that snippet. This is invalid HTML. Use classes to group set of elements, not IDs, as they should be unique.

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

#2

To determine which radio button is checked, try this:

要确定选中哪个单选按钮，可以尝试以下方法:

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

The event will be caught for all of the radio buttons in the group and the value of the selected button will be placed in val.

事件将被捕捉到组中的所有单选按钮，所选按钮的值将被放置在val中。

Update: After posting I decided that Paolo's answer above is better, since it uses one less DOM traversal. I am letting this answer stand since it shows how to get the selected element in a way that is cross-browser compatible.

更新:在发布后，我认为Paolo的回答更好，因为它使用了一个更少的DOM遍历。我让这个答案保持不变，因为它展示了如何以跨浏览器兼容的方式获得所选的元素。

#3

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

#4

another way

另一种方式

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

#5

This works great for me. For example you have two radio buttons with the same "name", and you just wanted to get the value of the checked one. You may try this one.

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

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

#6

The following code is used to get the selected radio button value by name

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

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

Thanks Adnan

由于Adnan

#7

I found this question as I was researching an error after I upgraded from 1.7.2 of jQuery to 1.8.2. I'm adding my answer because there has been a change in jQuery 1.8 and higher that changes how this question is answered now.

我发现这个问题时，我正在研究一个错误，我将jQuery从1.7.2升级到1.8.2。我添加了我的答案，因为jQuery 1.8和更高版本已经改变了这个问题的答案。

With jQuery 1.8 they have deprecated the pseudo-selectors like :radio, :checkbox, :text.

在jQuery 1.8中，他们弃用了伪选择器，比如:radio，:checkbox，:text。

To do the above now just replace the :radio with [type=radio].

要完成以上操作，只需将:radio替换为[type=radio]。

So your answer now becomes for all versions of jQuery 1.8 and above:

现在你的答案变成了所有版本的jQuery 1.8及以上版本:

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

You can read about the change on the 1.8 readme and the ticket specific for this change as well as a understand why on the :radio selector page under the Additional Information section.

您可以阅读1.8 readme上的更改和此更改的票据，以及在附加信息部分的:radio selector页面上了解更改的原因。

#8

For anyone who doesn't want to include a library to do something really simple:

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

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

jsfiddle

For a performance overview of the current answers check here

有关当前答案的性能概述，请参阅这里

#9

If you'd like to know the value of the default selected radio button before a click event, try this:

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

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

#10

You can use filter function if you have more than one radio group on the page, as below

如果页面上有多个无线电组，可以使用filter函数，如下所示

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

Here is fiddle url

这是小提琴url

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

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

#11

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

#12

If you want a true/false value, use this:

如果您想要一个真/假值，请使用以下方法:

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

#13

Something like this maybe?

这样可能吗?

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

When you click on any radio button, I believe it will end up selected, so this is going to be called for the selected radio button.

当你点击任何一个单选按钮时，我相信它最终会被选中，所以这将会被选中的单选按钮调用。

#14

I you have more than one group of radio buttons on the same page you can also try this to get the value of radio button:

我你在同一页上有多组单选按钮你也可以试试这个来获取单选按钮的值:

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

Cheers!

干杯!

#15

can also use a CSS class to define the range of radio buttons and then use the following to determine the value

还可以使用CSS类来定义单选按钮的范围，然后使用以下内容来确定值吗

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

#16

This worked for me..

这个工作对我来说. .

HTML:

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:

Jquery:

    $(".radioClass").each(function() {
        if($(this).is(':checked'))
        alert($(this).val());
    });

Hope it helps..

希望它能帮助. .

#17

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

#18

You might notice using class selector to get value of ASP.NET RadioButton controls is always empty and here is the reason.

您可能注意到使用类选择器来获取ASP的值。NET RadioButton控件总是为空，原因如下。

You create RadioButton control in ASP.NET as below:

在ASP中创建RadioButton控件。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" />

And ASP.NET renders following HTML for your RadioButton

和ASP。NET为您的RadioButton呈现以下HTML。

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

For ASP.NET we don't want to use RadioButton control name or id because they can change for any reason out of user's hand (change in container name, form name, usercontrol name, ...) as you can see in code above.

ASP。NET我们不希望使用RadioButton控件名或id，因为它们可以由于任何原因从用户手中更改(容器名、表单名、usercontrol名……)，正如您在上面的代码中看到的。

The only remaining feasible way to get the value of the RadioButton using jQuery is using css class as mentioned in this answer to a totally unrelated question as following

使用jQuery获取RadioButton值的唯一可行的方法是使用css类，就像在回答一个完全不相关的问题时提到的，如下所示

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