Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to check if at least one checkbox is checked in a group of checkboxes with different name values

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

like image 243
thepio Avatar asked Feb 03 '13 02:02

thepio


People also ask

How do you validate a form with multiple checkboxes to have atleast one checked?

There is a form with multiple checkboxes and we're going to make sure that at least one is checked using pure JavaScript. To set a custom validation error message, we will use setCustomValidity() method.

How do you validate that at least one checkbox should be selected?

This way, when saving to db, the value will always be there, 0 or 1. $rules = [ 'checkbox1' => 'required_without_all:checkbox2,checkbox3', 'checkbox2' => 'required_without_all:checkbox1,checkbox3', 'checkbox3' => 'required_without_all:checkbox1,checkbox2', ];

How can I require at least one checkbox be checked before a form can be submitted?

How can I enforce that requirement? You could use PHP to check if at least 1 of the check boxes is checked. You would probably also want to make sure your <input "name"> is different for each check box otherwise getting the return variable values might be tricky.


1 Answers

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...]
    }
});
like image 88
Nick Avatar answered Oct 20 '22 00:10

Nick