jQuery - ensuring all radio groups are checked

Question

I'd like to loop through multiple (dynamic) radio button groups using jQuery, and if any haven't had a selection made, it throws up an error and stops the form submission.

Here's my effort so far:

$("form").submit(function() {
    $(":radio").each(function(){
        if($(this).val().length == 0) {
            alert('Not selected all radios');
            return false;
        }
    }); 
});

But it always ignores the if statement which will stop the submission, as if maybe $(this) isn't actually the value of the radio buttons?

Here's a jsFiddle: http://jsfiddle.net/aVVW9/

Any help would be much appreciated, thank you!

Powers

Answer 1

Try this. The approach is to loop through ALL radio buttons, and THEN extract the name of the radio button group, using :checked to see if any member of that group is checked. A simple Boolean stops the errors after the first missing check is found.

$("form").submit(function() {
    var submitme = true;
    $(':radio').each(function() { // loop through each radio button
        nam = $(this).attr('name'); // get the name of its set
        if (submitme && !$(':radio[name="'+nam+'"]:checked').length) { 
        // see if any button in the set is checked
            alert(nam+' group not checked');
            submitme = false;
        }
    });
    return submitme; // cancel the form submit
});        ​

http://jsfiddle.net/mblase75/aVVW9/5/

Starinsky

Many thanks, this is superb and only shows the alert when nothing is checked, but is there a way to simplify the code somehow by removing the name, and also the return false; under the alert doesn't actually stop the form submitting :( – Powers

You can change the alert message to anything you like, of course. You might also want to add an error class to the radio group's labels, or something, to highlight the buttons that need to be checked: jsfiddle.net/mblase75/aVVW9/6 – Starinsky

How to edit if I want the user to see all the error in one alert? with the second edit, once the error is correct, where to edit to change the bgcolor back to white? – Lendlease

Answer 2

$("form").submit(function() {
    $(":radio", this).each(function(){
        if(!this.checked) {
            alert('Not selected all radios');
            return false;
        }
    }); 
});

or

$("form").submit(function() {
    if($(':radio:not(:checked)', this).length) {
       alert('Not selected all radios');
       return false;
    }
});

Check this demo. Here for simplicity I wrap each radio group within a div having class radio_group and loop over them.

Wellfounded

Thank you, but this always returns false, I wonder if it's because there are radio buttons within the groups that aren't checked? – Powers

Thank you, but same (I added in the ! by the way, and tried the second code also :() – Powers

It always says "Not selected all radios" for me, even if I have made a choice for both – Powers

Many thanks, same problem though, think I'm doing something wrong :( – Powers

@Nich why problem demo is working just fine, whats your problem? – Wellfounded

Unsure sorry, the demo does work perfectly but the code looks a little different to the above, I finally managed to leave work so unfortunately can't check from here, but will try again tomorrow - both yours and Blaze's solutions are great (I've upvoted both of course), so I'm going to see which one suits best tomorrow. Sorry for the long post :) And thank you again. – Powers

Answer 3

I've accidentally just found even more elegant solution! It is only useful when you know the exact count of radio buttons.

var x = 0;

$(":radio").change(function() {
x = x + 1;

if (x == count) {

//do smth

}

});

Stainless