jQuery, how do I indicate AT LEAST one checkbox in a group is required

Question

First let me thank all of you for your amazing efforts and help thus far. Now to the question.

I have five checkboxes and at least one of the five needs to be checked to validate as required.

I have seen a few methods of how to do this but I can't seem to make any of them work.

Solve One Solve Two

Now I am using both the validate plugin and metadata plugin. How can I easily say if one checkbox with class required_group is checked the rest are no longer required? I have also given all checkboxes class="required"

As always Thanks in Advance!

Edit: My apologies for improperly phrasing the question. I would use radio buttons or selects as it is quite easier but it is requested that I use checkboxes. Again thank you for your time and sorry for the confusion.

FINAL EDIT So here is how I did it in case anyone else ever needs to.

    jQuery.validator.addMethod('ClassAppliedToCheckBoxes', function(value, element, checked) {
            var $module = $(element).parents('.YourContainerClass');
            return $module.find('input:checked').length;
            });

            jQuery.validator.addClassRules("ClassAppliedToCheckBoxes", {
                    'ClassAppliedToCheckBoxes' : true
            });

            jQuery.validator.messages.required_group = 'Please check at least one of these fields.';

Answer 1

Please don't do that. It's a horrible practice from the viewpoint of usability. As soon as users sees checkboxes, they assume there will be multiple selection. For single selection, we have radioboxes. Give all of them the same name, and they'll be exclusive.

Example:

I am a:<br/>
<input type="radio" id="age_old" name="age" value="old">
  <label for="age_old">Oldtimer</label><br/>
<input type="radio" id="age_mid" name="age" value="mid" checked>
  <label for="age_mid">Middle-aged</label><br/>
<input type="radio" id="age_young" name="age" value="young">
  <label for="age_young">Youth</label><br/>

Bonus: no JavaScript required - all plain HTML. If you need the ability to not select anything, just add another radio box with an empty value:

<input type="radio" id="age_no" name="age" value="">
  <label for="age_no">...not telling!</label><br/>

UPDATE: It has been pointed out that this is not what the question is about. If that is the case, and the other reading ("at least one checkbox needs to be set") is required, ignore this.

Answer 2

Try something like this:

var $invalid = $(":checkbox.required").filter(function() {
    var n = this.name;
    return $(":checkbox[name='" + n "']:checked").length == 0;
});

From there, you could do a number of things. To halt form submission, check if the length is greater than zero (if so, there are some invalid ones). To highlight invalid ones:

$invalid.parent().css({ color: '#f00' });

Note that this isn't a very efficient algorithm: it performs the check on the same group as many times as there are checkboxes. If this is a bottleneck then there's a place you can improve, but it'll be a good starting point anyway.

Answer 3

I agree with Amadan that checkboxes are not the way to go. Checkboxes are for multiple choice. If you're looking to make the form accessible, then make it a SELECT:

<label for="myselect">Choose type of house</label>

<select name="myselect" id="myselect" class="required">
  <option value="1">Option 1 Text</option>
  <option value="2">Option 2 Text</option>
  <option value="3">Option 3 Text</option>
  <option value="4">Option 4 Text</option>
  <option value="5">Option 5 Text</option>
</select>

This will make your form more kind to people who navigates it with a screen reader. Radio buttons causes some issues for people who tab through forms.