8

我使用此代码获取 jquery 中单选按钮的值，我的问题是当我单击选项 1 时它工作正常，但是当我单击选项 2 时它不起作用。请帮忙！

<form>
Option 1<input type="radio" name="opt" id="radio" value="Option 1">
Option 2<input type="radio" name="opt" id="radio" value="Option 2">
</form>

$('#radio').change(function(){
var value = $( 'input[name=opt]:checked' ).val();
alert(value);
});

JSFiddle：http: //jsfiddle.net/khizar067/h6ye7/

4

6 回答 6

38

请尝试以下演示。

$('input[name=opt]').change(function(){
var value = $( 'input[name=opt]:checked' ).val();
alert(value);
});

http://jsfiddle.net/h6ye7/2/

于 2013-09-28T07:28:06.817 回答
11

IDof elements必须是唯一的，如果有多个具有相同 id 的元素，则 id 选择器将只返回第一个元素。因此，在您的情况下，更改事件处理程序仅添加到第一个单选元素

<form>
Option 1<input type="radio" name="opt" class="radio" value="Option 1">
Option 2<input type="radio" name="opt" class="radio" value="Option 2">
</form>

和

//or $('.radio') as the selector
var $radios = $('input[name=opt]').change(function () {
    var value = $radios.filter(':checked').val();
    alert(value);
});

演示：小提琴

于 2013-09-28T07:25:37.513 回答
5

id应该是唯一的，请尝试使用 class 代替：

html:

<form>
    Option 1<input type="radio" name="opt" class="radio" value="Option 1">
    Option 2<input type="radio" name="opt" class="radio" value="Option 2">
</form>

JS：

$('.radio').change(function(){
    var value = $( this ).val();
    alert(value);
});

演示小提琴

于 2013-09-28T07:27:22.417 回答
4 
 <form id="abcd">
     Option 1<input type="radio" name="opt" id="radio" value="Option 1">
     Option 2<input type="radio" name="opt" id="radio" value="Option 2">
 </form>

$('#abcd').on('change','input[name=opt]:checked',function(){
    var value = $(this).val();
    alert(value);
});
  1. id="abcd" 是整个 html 代码中唯一性的选择器，如果您有多个表单，它将有助于获得特定的表单。
  2. 在 jQuery 中阅读以下文档 访问http://api.jquery.com/on/ 如果此事件在选择器“abcd”的页面中随时发生，则“更改”是事件 jquery 将搜索 'input[name= opt]:checked' 即名称为 opt 的输入类型，将检查它是否被检查，而 function() 是一个处理事件的处理程序，这意味着您可以在这里编写逻辑...
于 2017-10-24T11:25:30.107 回答
2

试试这个，这对你有帮助，如果你使用多个单选按钮，那么你不需要获取元素的 id 或类，你只需通过标签名称获取元素属性..

这有几个例子

1.按标签名称（所有单选按钮都可以选择）

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

2.按类名（可以选择多个单选按钮）

$('.radiobutton').change(function(){
        var value = $( 'input[name=opt]:checked' ).val();
        alert(value);
    });

3.By id（一个单选按钮只选择）

$('#radiobutton').change(function(){
    var value = $( 'input[name=opt]:checked' ).val();
    alert(value);
});

小提琴Here

于 2013-09-28T07:28:48.127 回答
0 

$('input[name=opt]').on('change',function () {
    alert($(this).filter(':checked').val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  First Option<input type="radio" name="opt" class="radio" value="First Option">
  Second Option<input type="radio" name="opt" class="radio" value="Second Option">
</form>

于 2020-12-06T11:31:50.940 回答