Question

我使用此代码获取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/

Answer 1

请尝试使用以下演示。

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

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

Answer 2

ID元素must be unique，如果有多个元素具有相同的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);
});

演示：Fiddle

Answer 3

id应该是唯一的，请尝试使用类：

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

演示Fiddle

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

id =“abcd”是整个html代码中唯一性的选择器，如果您有多个表单，它将有助于获取特定表单。
在jQuery for中阅读以下文档访问http://api.jquery.com/on/ 'change'是事件，如果在选择器“abcd”的页面中随时发生此事件，jquery将搜索'input [name = opt]：checked'即输入类型，其名称为opt，并将检查是否已检查并运行（）是一个处理事件的处理程序意味着你可以在这里编写你的逻辑......

Answer 5

试试这个，这对你有所帮助，如果你使用多个单选按钮，那么你不需要获取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.通过id（仅选择一个单选按钮）

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

小提琴Here

Answer 6

$('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>

获取单选按钮值更改不起作用

6 个答案: