Determine if every radio group has had an option selected

Question

I need to make sure that all the radio groups have been answered before I enable the submit button. If I have:

var radioBtns = $('input').filter(':radio');

It tells me how many radio buttons I've got, but I need to know if there are any groups that haven't had an option selected yet.

It should be noted that it is not good practice to deliver the page without at least one selection in each radio group. The user should be able to get back to the original state if they select the wrong radio value, but it is not possible to "un-select" a radio group, any more than it is possible to select a value not in a drop-down list. — Jason, Dec 18 '13 at 03:06

Paul · Accepted Answer · 2011-07-22T23:09:15.360

9

If you know how many groups you have you can just do:

if($('input:radio:checked').length < numGroups){
    // At least one group isn't checked
}

Otherwise you need to count the number of groups first. I can't think of any way to do this better then:

var rgroups = [];
$('input:radio').each(function(index, el){
        var i;
        for(i = 0; i < rgroups.length; i++)
            if(rgroups[i] == $(el).attr('name'))
                return true;
        rgroups.push($(el).attr('name'));
    }
);
rgroups = rgroups.length;

if($('input:radio:checked').length < rgroups)
    alert('You must fill in all the fields.');
else
    alert('Thanks!');

edited Jul 22 '11 at 23:09

answered Jul 22 '11 at 22:49

Paul

139,544
27
275
264

Maybe somehow use the .unique method to find the unique radio button names. – Phillip Senn Jul 22 '11 at 23:04
Dang Paul, way to go! I'm not fluent enough in js to write code like this. Thank you, because I wouldn't have thought to push the elements into an array. Come to think of it, there's still hope for the .unique method here. – Phillip Senn Jul 22 '11 at 23:31
@cf_PhillipSenn, jQuery.unique() only works on DOM elements and not the way you might expect. It only conisders two elements unique if they are the *exact* same element. So any two elements are unique even if they have all the same properties. – Paul Jul 23 '11 at 00:44

AlienWebguy · Answer 2 · 2011-07-22T23:16:14.260

5

This works:

var all_answered = true;
$(':radio').each(function(){
    if($(':radio[name='+$(this).attr('name')+']:checked').length == 0)
    {
        all_answered = false;
    }
});
alert(all_answered);

Working demo: http://jsfiddle.net/AlienWebguy/8Cu6d/1/

edited Jul 22 '11 at 23:16

answered Jul 22 '11 at 22:49

AlienWebguy

76,997
17
122
145

No, that get's them all. I need to know how many groups are not checked. – Phillip Senn Jul 22 '11 at 23:03

Andrew Casal · Answer 3 · 2016-10-28T14:02:14.853

To get the count of radio button groups:

var prevGroupName = "", currGroupName = "", groupCount = 0;
    $("input[type='radio']").each(function () {

        if (prevGroupName == "") {
            groupCount++;
            prevGroupName = this.name;
        }

        currGroupName = this.name;

        if (prevGroupName != currGroupName) {
            groupCount++;
            prevGroupName = currGroupName;
        }
    });

To get the number of checked radio button:

var radioChecked = $("input[type='radio']:checked").length;

score 1 · Answer 4 · edited May 23 '17 at 12:34

Based on answers here, here and here. Checks against a class and permits multiple items from same group to be selected.

function check_all_groups () {
    var counter = 0
    $('.btn-group').each(function () {
        $(this).children('.atleastone').each(function () {
            if ($(this).hasClass('active')) {
                counter += 1
                return false
            }
        });
    });

    if (counter == $('.btn-group').length) {
        return true
    }
};

score 1 · Answer 5 · edited May 23 '17 at 12:02

I have theoretical* solution building off Paulpro's answer above that uses the uniqueness property of Set to filter a list of element names from JQuery:

var radioNames = new Set(Array.from($('input:radio').map(function() { return this.name } )));
var inputGroupCount = radioNames.length;

if( $('input:radio:checked').length < inputGroupCount){
    // At least one group isn't checked
}

This uses the map() function to extract the name attributes from the radio groups. This is then converted to an Array, which is used as the constructor argument for Set.

Unfortunately, as of April 2016 there is no support for Set(iterable) and Array.from() in IE; Opera and Safari have limited support.

If you can ensure your users are on Chrome or Firefox, or this is backend code, then go ahead!

Rafay · Answer 6 · 2011-07-22T23:17:40.487

1

not very neat way but still you can use it

$("input:button").click(function(){
    var v =$('input[name="a"]').filter(':checked');
    var vr =$('input[name="b"]').filter(':checked');
    if(v.length==0)
    {
    alert("select a group");

    }else alert("very good");


    if(vr.length==0)
    {
    alert(" o come on ");

    }else alert("guud");

    });

FIDDLE

edited Jul 22 '11 at 23:17

answered Jul 22 '11 at 23:04

Rafay

30,950
5
68
101

Determine if every radio group has had an option selected

6 Answers6

Linked