JQuery Multiple Checkbox Groups Validation

Question

How can I validate Checkbox groups with JQuery? I need to make sure that in each group at least one checkbox is selected. I'd like to use a class to identify the groups, so, the html would look like this:

<!-- checkbox group -->
<fieldset class="CbxGroup">
  <legend>Checkbox Group (required)</legend>
  <label><input type="checkbox" name="cbxGroup1[]" value="one" id="cbxGroup1_0">One </label>
  <br>
  <label><input type="checkbox" name="cbxGroup1[]" value="two" id="cbxGroup1_1">Two </label>
  <br>
  <label><input type="checkbox" name="cbxGroup1[]" value="three" id="cbxGroup1_2">Three</label>
  <br>
  <label><input type="checkbox" name="cbxGroup1[]" value="four" id="cbxGroup1_3">Four </label>
  <br>
  <label><input type="checkbox" name="cbxGroup1[]" value="five" id="cbxGroup1_4">Five </label>
  <br>
</fieldset>

Because checkboxes don't have a wrapper element like the select list/menu, I don't know how to pull this off. For single checkboxes I can do something like the following but it does not work for checkbox groups:

Thank you!

$('.CbxSingle').each(function() {
        var CbxCheck = $(this);
        if(!CbxCheck.is(':checked')) {
            // do something
        }
        else{
            // do something else
        }
    });

I'd like something like the following that would validate each group separately:

$('.CbxGroup').each(function() {
        if ($('input[type=checkbox]:checked').length == 0) {
            alert('not selected!');
        }
        else{
            alert('selected!');
        }
    });

Andrew Odri · Accepted Answer · 2011-12-23 23:36:52Z

3

Perhaps something like this might work:

if($(".CbxSingle input[type=checkbox]:checked").length != 0){
    // Run success code
}else{
    // Run failure code
}

There is actually a very similar reference on the jQuery documentation website for the :checked selector: http://api.jquery.com/checked-selector/

Hope that helps!

answered Dec 23, 2011 at 23:36

Andrew Odri

9,5286 gold badges48 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1002039 Over a year ago

Thank you! This was exactly what I needed. I thought this was going to be very complicated but it turned out to be so simple.

user1002039 Over a year ago

Oops! I spoke too early. If I add another checkbox group, it validates them as a single group rather two separate ones. Any idea how I can teak it so it validates each group separately?

user1002039 Over a year ago

$('.mcCbxGroup').each(function() { if ($('input[type=checkbox]:checked').length == 0) { alert('not selected!'); } else{ alert('selected!'); } });

Andrew Odri Over a year ago

Hmm, try this as the selector: $('.CbxSingle input[type=checkbox][name="cbxGroup1[]"]:checked')

Tim Withers · Accepted Answer · 2011-12-23 23:37:16Z

2

This might work for what you describe:

var numberChecked=$("input[name='cbxGroup1[]']:checked").length;
if(numberChecked<1)
    alert('none checked');
else
    alert(numberChecked+' checked);

answered Dec 23, 2011 at 23:37

Tim Withers

12.1k5 gold badges45 silver badges68 bronze badges

4 Comments

Tim Withers Over a year ago

This would also allow you to have multiple groups of checkboxes, just change the name of the checkboxes and you can reuse the code throughout your form.

user1002039 Over a year ago

I don't think this would work. I need to identify the groups with the class name. That means I need to identify all the checkboxes within a group and make sure that at least one is selected. That way I can have multiple groups and have all of them validated the same way without writing code for each group separately.

Tim Withers Over a year ago

You can change the name for all the groups. So this is for cbxGroup1[], if you have a cbxGroup2[], then make another variable for those that are checked. Here is a fiddle for you to see it in action: jsfiddle.net/Ygcc8

user1002039 Over a year ago

Hi, What I'd like is to not having to write new code for each checkbox group. Just one validator that allows me to place multiple checkbox groups on the form and have all of them validated separately. I'd like to validate each group, not each checkbox.

sczizzo · Accepted Answer · 2011-12-23 23:40:06Z

0

I created a slight variation as a fiddle, and it seems to work fine. I think your problem is the .CbxSingle class isn't applied to the inputs, so you might use a different selector like .CbxGroup input[type=checkbox].

answered Dec 23, 2011 at 23:40

sczizzo

3,20622 silver badges28 bronze badges

2 Comments

user1002039 Over a year ago

The code above for single checkboxes works fine. It isn't for checkbox groups which is what I need so I can have multiple groups without writing separate code for each.

sczizzo Over a year ago

Try replacing $('.CbxSingle') in your JavaScript snippet with $('.CbxGroup input[type=checkbox]').

Collectives™ on Stack Overflow

JQuery Multiple Checkbox Groups Validation

3 Answers 3

4 Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related