如何检测 jquery 中单选按钮的选中状态？

Question

我有一组单选按钮，第一个是在呈现 html 时静态设置的。其余的是使用 jQuery 动态创建的。下面给出了创建单选按钮的代码

for (var i = 1; i < length; i++){
        $('.radio').append('<br>');
        $('.radio').append('<label><input type = "radio" id = '+options[i]+' value = '+i+' name = "options" class = "radio-options"/><p>'+options[i]+'</p></label>');
    }

    //creating the last radio button here
    $('.radio').append('<br>');
    $('.radio').append('<label><input type = "radio" id = "Custom" value = '+length+' name = "options" class = "radio-options"/><p>Custom</p></label>')

我有一个提交按钮，当我单击它时，我想检查哪个单选按钮具有选中的属性属性。这是我的尝试。

$('.submit-butt').on('click', function(){

在调用提交按钮单击处理程序后，我立即打印所有单选按钮的选中属性状态。无论我是否选择了单选按钮，它们都被证明是错误的。

                    for(var i = 0; i < options_length; i++){
                        console.log($('input:radio[name=options]').prop('checked'));
                    }


                   if($('input:radio[name=options]').prop('checked', true)){
                       console.log('Found my value');

                       var _this = $('input:radio[name=options]:checked');

但是，由于某种原因，此控制台日志语句将 Custom 作为 id 打印出来，这是最后一个单选按钮的 id，即使我没有选择它。

console.log(_this.attr('id'));

这是我第二次打印所有单选按钮的选中属性的地方。它在这里也被证明是错误的，包括在上一行中打印出来的 Custom id 单选按钮。

                       for(var i = 0; i < options_length; i++){
                        console.log($('input:radio[name=options]').prop('checked'));
                    }
                   }
                });

无论我是否选择单选按钮，也无论是哪个单选按钮，当我点击提交按钮时，会立即选择自定义单选按钮，即使该单选按钮的选中属性仍会打印到错误的。我该如何解决这个问题？

Answer 1

您应该为动态创建的单选按钮的 id 和其他属性添加引号：

for (var i = 1; i < length; i++){
        $('.radio').append('<br>');
        $('.radio').append('<label><input type = "radio" id = "'+options[i]+'" value = "'+i+'" name = "options" class = "radio-options"/><p>'+options[i]+'</p></label>');
    }

    //creating the last radio button here
    $('.radio').append('<br>');
    $('.radio').append('<label><input type = "radio" id = "Custom" value = "'+length+'" name = "options" class = "radio-options"/><p>Custom</p></label>')

Answer 2

不要忘记引号..

$('.radio').append('<label><input type = "radio" id = "'+options[i]+'" value = "'+i+'" name = "options" class = "radio-options"/><p>'+options[i]+'</p></label>');

试试这样的。

for(var i = 0; i < options_length; i++){
    console.log($('#'+options[i]).is(':checked'));
}