Question

I have a problem that I have been seeking an answer for for a while now and can’t get it to work.

I am searching for a way to check if atleast one checkbox in a group of checkboxes is checked. What makes it so difficult for me is that every one of these inputs have different name values. I found answers only for jQuery validation plugin etc. Here is my html:

<tr class="formField-checkbox formFieldRequired">
  <td class="formLabelHolder"><label for="field129">Group of checkboxes</label></td>
  <td class="formFieldHolder">
    <input type="checkbox" name="field129[0]" class="formCheckbox required" value="Something1"> 
    <label><span class="formCheckboxLabel">Something1</span></label>
    <input type="checkbox" name="field129[1]" class="formCheckbox required" value="Something2"> 
    <label><span class="formCheckboxLabel">Something2</span></label>
    <input type="checkbox" name="field129[2]" class="formCheckbox required" value="Something3"> 
    <label><span class="formCheckboxLabel">Something3</span></label>
  </td>
</tr>

Here is my jQuery that I have now:

// Validate all checkboxes
var named = [];
var $requiredCheck = $(this).find('input[type="checkbox"].required');

$($requiredCheck,$formId).each(function() {
  // Creates an array with the names of all the different checkbox group.
  named[$(this).attr('name')] = true;
});

// Goes through all the names and make sure there's at least one checked.
for (name in named) {
  var $checkboxes = $("input[name='" + name + "']");
  if ($checkboxes.filter(':checked').length == 0) {
    $checkboxes.closest('.formFieldHolder').addClass('error').append('<span   class="error">Required!</span>');
  } 
}

This obviously doesn’t work perfectly at the moment because the checkboxes have different name values. Now the append prints out as many error messages as there are checkboxes. For example if there are five checkboxes and one is checked, it still gives the error message four times. I have tried to solve this on my own for so long but simply can’t get it right. I can’t change the name value of these checkboxes or quite simply do anything to the html. One way I figured this could be done is to remove the last [0], [1] and [2] parts in the names but I didn’t find a way how I could get it to work.

I think simple jQuery validation methods will fail since there could be more checkbox groups than just one in a single form. The next group of checkboxes would have name value of name=”field130[0]”, name=”field130[1]” and name=”field130[2]”. I think you get my point, hopefully.

Any help would be much appreciated.

EDIT:

Added the description that there could be more than one group of checkboxes in one form

Answer 1

You’re making this way too complicated 🙂

if ($('.required:checked').length > 0) {  // the "> 0" part is unnecessary, actually
    [do something]
}

See the first example on the official jQuery API page for :checked.

In response to your comment

If you have multiple forms on the page, you can specify the form as a container:

if ($('#form1_id').find('.required:checked').length) {...

To test multiple forms

Give each form the class testable_form.

$('.testable_form').each(function() {
    if ($(this).find('.required:checked').length) {
        [do something - set a flag, add a class...]
    }
});