How to detect checked status of radio buttons in jquery?

Question

I have a set of radio buttons, with the first one being statically set at the time of rendering the html. The remaining are dynamically created using jQuery. The code for creating the radio buttons is given below

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>')

I have a submit button, which when I click, I want to check which of the radio buttons has a checked property attribute. Here's my attempt at doing that.

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

I print the checked attribute status of all the radio buttons immediately after the submit button click handler is invoked. They all come out to be false, regardless of whether I have a radio button selected or not.

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

But, for some reason this console log statement prints out Custom as the id, which is the id of the last radio button, even though i haven't selected it.

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

Here is where I print the checked attribute of all the radio buttons a second time. It comes out to be false here as well, including the Custom id radio button, which printed out in the previous line.

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

Regardless of whether I choose a radio button or not, and regardless of which radio button that is, when I hit the submit button, the Custom radio button is immediately selected, even though the checked property of that radio button still prints to false. How do I solve this issue?

O'boy, firstly what is `options_length`? Secondly `if ( $(element).prop('checked', true) )...` is always true, and doesn't check if something is checked, **it sets** the checked property to true and returns a jQuery collection. — adeneo, Sep 15 '16 at 13:24
Possible duplicate of [How to check if a checkbox is checked in jQuery?](http://stackoverflow.com/questions/901712/how-to-check-if-a-checkbox-is-checked-in-jquery) — Liam, Sep 15 '16 at 13:31
`$('input:radio[name=options]').prop('checked', true)` **sets** the checked prop it doesn't check if it's checked you want `$('input:radio[name=options]').is(':checked')` or `$('input:radio[name=options]').prop('checked') == true` — Liam, Sep 15 '16 at 13:32
@adeneo options_length is basically a variable that detects how many options the user has entered, based on which I create the number of checkboxes. — random_coder_101, Sep 15 '16 at 13:34
@Liam - So I tried what you just said. It seems to work only for the first statically created radio button. How do I get that to work for the dynamically created radio buttons? — random_coder_101, Sep 15 '16 at 13:39
It should work for any **valid** radio buttons. Static or dynamic.TBH your question is hard to follow, it'd be better if you created a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) — Liam, Sep 15 '16 at 13:50

score 0 · Answer 1 · answered Sep 15 '16 at 13:25

0

You should add quotes to id and other properties of dynamically created radio button :

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>')

answered Sep 15 '16 at 13:25

DjaouadNM

22,013
4
33
55

Is that going to fix my issue, or is that just something to do with good coding practices? – random_coder_101 Sep 15 '16 at 13:29
@ZaidHumayun - that is half of the fix. quotes are not optional. you need them. – Robert Parham Sep 15 '16 at 13:30

score 0 · Answer 2 · answered Sep 15 '16 at 13:28

0

Don't forget the quotes..

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

Try something like this.

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

answered Sep 15 '16 at 13:28

Robert Parham

704
3
10

So I added the quotes and tried your version of the if statement, with .is(':checked'), but without the for loop, and it seems to detect if I've selected a radio button now. Now, how do I detect which radio button is selected without running it through a for loop? – random_coder_101 Sep 15 '16 at 13:49
oh, i i understand why you were using name then. use `$("input[name='options']").is(":checked")` @ZaidHumayun – Robert Parham Sep 15 '16 at 13:51

How to detect checked status of radio buttons in jquery?

2 Answers2