javascript多个复选框验证

Question

我想在表单中使用此简单脚本，以确保至少选中了1个框，但是我感觉有些错误，很可能是在getElementsByName标记处。 无论是否选中项目，我总是会弹出框。

<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>

和表格，最后可能会或可能不会最后有更多复选框：

<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

这是罪魁祸首：

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

HTML元素的id属性是唯一的，而您的是。 name属性用于将元素按逻辑分组在一起（特别是在复选框和单选按钮的情况下）。

为了将它们分组在一起，名称必须相同。 id[8][10]与id[8][11] ，您对document.getElementsByName('id[][]')调用实际上是在寻找名为“ id [] []”的元素。

您必须将元素的名称更改为匹配的名称，即“ checkboxGroup”，然后使用document.getElementsByName('checkboxGroup')

Answer 2

也许使用getElementsByTagName

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

如评论所述，您可能无法检查属性类型，因为如果在网站中添加任何其他复选框，则可能会破坏代码。

改变这个

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

通过

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

然后，“验证”代码应如下所示。

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[][]');

由于已在elements上指定了所有索引，因此不选择任何元素。

这是你怎么做？

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;
    }
}