Question

我想在我的表单中使用这个简单的脚本，以确保我至少检查了一个框，但我感觉有些问题，很可能是在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[][]');

不选择任何元素，因为您已经指定了元素上的所有索引。

以下是如何做到的？

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

javascript多个复选框验证

3 个答案: