javascript需要从一系列复选框中选中一个复选框

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.

Answer 1

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

Answer 2

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 .