javascript require a checkbox to be checked from an array of checkboxes

Question

I currenlty have some javascript/jquery code that displays an error message if no boxes are checked. However when I check a box and submit the form the error message still displays.

any help would be great!

javascript code:

    var hobbies = $('#hobbies').val();
    if ($('#hobbies :checkbox:checked').length === 0){
    $("#multichk").after('<span class="error">Please choose at least one.</span>');
    hasError = true;
    }

html code:

 <input type='checkbox' id='hobbies' name='hobbies[0]' value='1'/><label for='hobbies0'>football</label><br />

 <input type='checkbox' id='hobbies' name='hobbies[1]' value='2'/><label for='hobbies1'>soccer</label><br />

 <input type='checkbox' id='hobbies' name='hobbies[2]' value='3'/><label for='hobbies2'>baseball</label><br />

 <input type='checkbox' id='hobbies' name='hobbies[3]' value='4'/><label for='hobbies3'>tennis</label><br />

 <input type='hidden' id='multichk' />

Thank you.

Please post the code that submits the form. You probably just need to hide the error after submitting it. Something like: `$(".error").hide()` — Kevin Collins, May 25 '12 at 02:38
It is not valid HTML to have multiple elements with the same id, it is also better to put the control inside its label (so clicking on the label checks the control) and finally, don't use XML markup for HTML elements. — RobG, May 25 '12 at 02:40

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

The way you have the checkboxes named and identified, they won't be part of the same group, and they won't be properly identified.

Each element on a page, when identified, must have a unique ID, and for a group of checkboxes, or radio buttons for that matter, to be validated and delivered as a group, each member of the group must have the same name.

Given these rules, it should come as no surprised that the for attribute of a label tag references an element's id attribute, rather than its name attribute.

Now, I'm guessing that you're using PHP for your server-side language (based on the brackets in the checkbox names), in which case the checkboxes should be declared like so:

<input type='checkbox' id='hobbies0' name='hobbies[]' value='1'/>
<label for='hobbies0'>football</label><br />

<input type='checkbox' id='hobbies1' name='hobbies[]' value='2'/>
<label for='hobbies1'>soccer</label><br />

<input type='checkbox' id='hobbies2' name='hobbies[]' value='3'/>
<label for='hobbies2'>baseball</label><br />

<input type='checkbox' id='hobbies3' name='hobbies[]' value='4'/>
<label for='hobbies3'>tennis</label><br />

[Note: labels only moved to next line to remove horizontal scroll in code box]

With the HTML straightened out, the jQuery would look something like this:

if($('input:checkbox[name="hobbies[]"]:checked').length === 0){
    $("#multichk").after('<span class="error">Please choose at least one.</span>');
    hasError = true;
}

Reference for selector format

If that selector still gives you trouble, then you may need to prefix the square brackets with double backslashes like this:

if($('input:checkbox[name="hobbies\\[\\]"]:checked').length === 0){

Reference for double backslashes

Hope this helps

I'm sorry, the id was an error on my part. I do have the id's with unique names just like my label names. — dan, May 25 '12 at 03:32
Oh geeze WORKS PERFECT!!!!!!!!!!!! Thank you! short code too! The only change I made was name= to class= — dan, May 25 '12 at 04:20

score 1 · Answer 2 · answered May 25 '12 at 02:50

Technically your HTML is invalid; multiple elements with the same id is illegal. You should use a class selector instead of an id selector...

Anyway, the easiest way is to put the span there and clear it when someone checks a check box.

<input type='checkbox' id='hobbies' name='hobbies[0]' value='1'/><label for='hobbies0'>football</label><br />

 <input type='checkbox' id='hobbies' name='hobbies[1]' value='2'/><label for='hobbies1'>soccer</label><br />

 <input type='checkbox' id='hobbies' name='hobbies[2]' value='3'/><label for='hobbies2'>baseball</label><br />

 <input type='checkbox' id='hobbies' name='hobbies[3]' value='4'/><label for='hobbies3'>tennis</label><br />

 <input type='hidden' id='multichk' />

 <span id="error_message" class="error"></span>

Then your js:

var hobbies = $('#hobbies').val();
if ($('#hobbies:checked').length === 0) {
    $('#error_message').innerHTML('Please choose at least one.');
    hasError = true;
} else {
    $('#error_message').innerHTML('');
    hasError = false;
}

You can reset it whenever they click a checkbox by setting up a handler:

function changed(checkbox) {
  return function() { 
    if (checkbox.checked) {
      $('#error_message').innerHTML('');
      hasError = false;
    }
  }
}

var checkboxes = document.querySelector('#hobbies')
for (var i=0; i<checkboxes.length; ++i) {
  checkboxes[i].onchange = changed(checkboxes[i]);

Above is the idea; working code in this fiddle.

javascript require a checkbox to be checked from an array of checkboxes

2 Answers2