javascript多个复选框验证

Question

I would like to use this simple script with my form to make sure I have at least 1 box checked but I have a feeling something is wrong, most likely at the getElementsByName tag. I always get the pop up box no matter if I have items checked or not.

<script language="javascript">
function validate() {
    var chks = document.getElementsByName('id[][]');
    var hasChecked = false;
    for (var i = 0; i < chks.length; i++) {
        if (chks[i].checked) {
            hasChecked = true;
            break;
        }
    }
    if (hasChecked == false) {
        alert("Please select at least one.");
        return false;
    }
    return true;
}
</script>

and the form, which may or may not end up with more checkboxes in the end:

<form 
enctype="multipart/form-data" 
method="post" 
action="formsubmission.php"
name="form_type" onSubmit="return validate()">

<input id="attrib-8-10" type="checkbox" value="10" name="id[8][10]">
<label class="Checkbox" for="attrib-8-10">thick</label>
<input id="attrib-8-11" type="checkbox" value="11" name="id[8][11]">
<label class="Checkbox" for="attrib-8-11">medium</label>
<input id="attrib-8-12" type="checkbox" value="12" name="id[8][12]">
<label class="Checkbox" for="attrib-8-12">thin</label>

Answer 1

This line is the culprit:

var chks = document.getElementsByName('id[][]');

The id attribute of an HTML element is meant to be unique, which yours are. The name attribute is meant to logically group elements together (especially in the case of checkboxes and radio buttons).

In order to group them together, the name must be the same. id[8][10] is not the same as id[8][11] , and your call to document.getElementsByName('id[][]') is literally looking for elements named "id[][]".

You must change the name of the elements to be something that matches, ie "checkboxGroup" and then use document.getElementsByName('checkboxGroup')

Answer 2

Maybe using the getElementsByTagName

var chks = document.getElementsByTagName('input');
for (var i in chks)
{
   if (chks[i].getAttribute('type') == "checkbox")
   {
      if (chks[i].checked)
         hasChecked = true;
   }
}

As the comments says, you may not check the attribute type, because it could break your code if you add any other checkbox in your website.

Change this

<input id="attrib-8-10" type="checkbox" value="10" name="id[8][10]">

By

<input id="attrib-8-10" type="checkbox" value="10" class="checkable" name="id[8][10]">

Then the "validate" code should look like this.

var chks = document.getElementsByTagName('input');
for (var i in chks)
{
   if (chks[i].getAttribute('type') == "checkbox" && chks[i].className == "checkable")
   {
      if (chks[i].checked)
         hasChecked = true;
   }
}

Answer 3

var chks = document.getElementsByName('id[][]');

Does not select any element, as you have specied all the index on the elements .

Here is how you can do it?

var chks= document.getElementsByTagName('input');
for (var x=0; x < chks.length; x++) {
    if (chks[x].type.toUpperCase()=='CHECKBOX' && chks[x].checked == true) {
        hasChecked = true;
        break;
    }
}