CODEWITHSUNDEEP
jquery
Phillip Senn
Phillip Senn

Reputation: 47595

Determine if every radio group has had an option selected

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.

Upvotes: 4

Views: 2740

Answers (6)

Andrew Casal
Andrew Casal

Reputation: 91

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;

Upvotes: 2

brasskazoo
brasskazoo

Reputation: 78748

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!

Upvotes: 1

scharfmn
scharfmn

Reputation: 3661

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
    }
};

Upvotes: 1

Rafay
Rafay

Reputation: 31033

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

Upvotes: 1

SeanCannon
SeanCannon

Reputation: 77956

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/

Upvotes: 5

Paul
Paul

Reputation: 141829

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

Upvotes: 9

Related Questions