javascript - 如何检测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'));

这里是我第二次打印所有单选按钮的选中属性的地方。它在这里也被证明是错误的，包括在上一行中打印出来的“自定义 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>')