Show an element if all radio boxes have a selection in jQuery

Question

I am trying to make a form show/hide a submit button dependant on if all the radio elements have a selection - this is what i've got so far.. Any ideas what i'm doing wrong?

$(document).ready(function() {
    $('#submit-btn').hide();

    if ($(':radio:checked').length > 0) {//try reach selected radio here
        $('#submit-btn').show();
    }
});

A look at [this answer](http://stackoverflow.com/a/11771844/448232) might be what you're looking for. — Robin Maben, Aug 02 '12 at 08:51
Do you need all radio buttons to be checked? or all radio button groups? — timing, Aug 02 '12 at 08:56
All sorted - credit to all of you although I used Robins snippet in the end :) — Zabs, Aug 02 '12 at 09:21

score 2 · Answer 1 · answered Aug 02 '12 at 08:57

2

var count = 0

$(':radio').each(function(){
   count++;
});

if ($(':radio:checked').length == count) {
        $('#submit-btn').show();  
}

This might help your cause..!!

answered Aug 02 '12 at 08:57

Misam

4,320
2
25
43

score 1 · Accepted Answer · answered Aug 02 '12 at 08:45

1

 $('.toCheck').length == $('.toCheck:checked').length;

If that evaluates to true, then all input for that selector are checked! :)

answered Aug 02 '12 at 08:45

Robin Maben

22,194
16
64
99

This will work fine for checkboxes, but not radio boxes. (Although for checkbox I would rather search for `'.toCheck:not(:checked)'` to find any that are not checked.) – Ariel Aug 02 '12 at 08:46
AFAIK, `:checked` [works for radio buttons too](http://stackoverflow.com/questions/2272507/find-out-if-radio-button-is-checked-with-jquery). – Robin Maben Aug 02 '12 at 08:47
You are misunderstanding that code. A group of radio buttons returns multiple elements, that code checks if *any* of the elements are checked, see: http://api.jquery.com/is/ But in a group of radio elements some of them of course will not be checked. – Ariel Aug 02 '12 at 08:51
@Ariel: I still don't see what I'm missing. See this [fiddle](http://jsfiddle.net/mrobin/tqFbQ/1/). Seems to work. Try checking the radio buttons one by one. Are you saying "grouped" by the `name` attribute? – Robin Maben Aug 02 '12 at 08:56
@RobinMaben You have just one radio button in each group (which is of course pointless for a radio button). Add a second one and try it and you'll see: http://jsfiddle.net/tqFbQ/2/ – Ariel Aug 02 '12 at 09:21

score 1 · Answer 3 · answered Aug 02 '12 at 08:46

This will return true if ANY radio element is checked, which is not what you want.

Unfortunately there is no quick way to deal with radio elements, since even if one is checked the others will not show as checked.

You'll have to manually loop over them.

score 1 · Answer 4 · edited Aug 10 '12 at 06:16

I worked it out using Robin's snippet with some modification.

I didn't explain properly that each 'question' has a set of 5 radio buttons (my fault) - but the following code does what I need now.

Essentially the same as Robins except as each question has 5 radio boxes I divide the length by 5 and it works now! Thank you everyone :)

$(document).ready(function() {
    $('#submit-btn').hide();
    $("form input:radio").change(function() {     
        var questions = ($('.questions').length / 5);
        var checked = ($('.questions:checked').length);
        if (questions == checked)
        {
            $('#submit-btn').show();
        }
    });
});

Show an element if all radio boxes have a selection in jQuery

4 Answers4