如何在jquery中检测单选按钮的已检查状态?

时间:2016-09-15 13:21:05

标签: javascript jquery html button

我有一组单选按钮,第一个按钮是在渲染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'));

这是我第二次打印所有单选按钮的checked属性的地方。它在这里也是假的,包括Custom ID单选按钮,它在前一行打印出来。

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

无论我是否选择单选按钮,无论选择哪个单选按钮,当我点击提交按钮时,立即选中自定义单选按钮,即使该单选按钮的checked属性仍然打印到假。我该如何解决这个问题?

2 个答案:

答案 0 :(得分:0)

您应该为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>')

答案 1 :(得分:0)

不要忘记引号..

"components": [
    "reset",
    "site",
    "button"
  ]

尝试这样的事情。

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