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

这应该这样做，所有这些都在documentation中，其中有一个非常类似的例子：

$("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及更高版本发生了变化，这改变了现在回答这个问题的方式。

With jQuery 1.8 they have deprecated伪选择器如：radio，：checkbox，：text。

要执行上述操作，只需将:radio替换为[type=radio]。

所以现在你的答案适用于所有版本的jQuery 1.8及以上版本：

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

您可以在“附加信息”部分的change on the 1.8 readme上了解the ticket specific for this change和:radio selector page以及理解原因。

Answer 8

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

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

jsfiddle

有关当前答案的效果概览check here

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/

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

Answer 12

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

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

Answer 13

这样的事可能吗？

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

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

Answer 14

我在同一页面上有多组单选按钮，您也可以尝试这样来获取单选按钮的值：

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

干杯！

Answer 15

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

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

Answer 16

这对我有用..

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

希望有所帮助......

Answer 17

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

Answer 18

您可能会注意到使用类选择器来获取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为您的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>

对于ASP.NET，我们不想使用RadioButton控件名称或ID，因为他们可以出于任何原因从用户手中更改（更改容器名称，表单名称），usercontrol name，...），如上面的代码所示。

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

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

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

18 个答案:

jsfiddle