6

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!

Jonas
  • 121,568
  • 97
  • 310
  • 388
Nick
  • 3,745
  • 20
  • 56
  • 75

3 Answers3

10

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/

Blazemonger
  • 90,923
  • 26
  • 142
  • 180
  • 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 :( – Nick May 22 '12 at 17:53
  • 2
    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: http://jsfiddle.net/mblase75/aVVW9/6/ – Blazemonger May 22 '12 at 17:53
  • 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? – Interfaith Sep 24 '12 at 17:45
1
$("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.

thecodeparadox
  • 86,271
  • 21
  • 138
  • 164
  • Thank you, but this always returns false, I wonder if it's because there are radio buttons within the groups that aren't checked? – Nick May 22 '12 at 17:25
  • Thank you, but same (I added in the ! by the way, and tried the second code also :() – Nick May 22 '12 at 17:26
  • It always says "Not selected all radios" for me, even if I have made a choice for both – Nick May 22 '12 at 17:32
  • Many thanks, same problem though, think I'm doing something wrong :( – Nick May 22 '12 at 17:55
  • 1
    @Nich why problem demo is working just fine, whats your problem? – thecodeparadox May 22 '12 at 17:56
  • 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. – Nick May 22 '12 at 19:02
0

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

}

});
Lukas Valatka
  • 103
  • 1
  • 14