如果所有复选框都具有相同名称,如何验证复选框选择？

Question

大家好我有一组具有相同名称的复选框,以便在服务器端发布时获取单个变量的数组,例如L

<input type="checkbox" name="midlevelusers[]" value="1">
<input type="checkbox" name="midlevelusers[]" value="1">
<input type="checkbox" name="midlevelusers[]" value="1">
<input type="checkbox" name="midlevelusers[]" value="1">

我需要一个javascript验证来检查是否选中了任何复选框？

感谢致敬

注意:我需要javascript验证

Answer 1

您可以访问DOM元素并检查其checked属性.例如:

var list, index, item, checkedCount;

checkedCount = 0;
list = document.getElementsByTagName('input');
for (index = 0; index < list.length; ++index) {
    item = list[index];
    if (item.getAttribute('type') === "checkbox"
        && item.checked
        && item.name === "midlevelusers[]") {
        ++checkedCount;
    }
 }

实例

在那里,我们正在查看整个文档,这可能效率不高.如果你有这些周围的容器(可能你做什么,一个form元素),那么你可以给该元素的ID,然后看看只在它(只是var,form =和list =线新/不同):

var form, list, index, item, checkedCount;

checkedCount = 0;
form = document.getElementById('theForm');
list = form.getElementsByTagName('input');
for (index = 0; index < list.length; ++index) {
    item = list[index];
    if (item.getAttribute('type') === "checkbox"
        && item.checked
        && item.name === "midlevelusers[]") {
        ++checkedCount;
    }
 }

实例

偏离主题:你没有提到使用库,所以我没有使用过上面的库,但如果你使用jQuery,Prototype,YUI,Closure或其他任何一个,那么FWIW这个东西要容易得多.例如,使用jQuery:

var checkedCount = $("input[type=checkbox][name^=midlevelusers]:checked").length;

实例其他库将类似,但细节会有所不同.

Answer 2

<form name="myform" method="POST" action="" onsubmit="return checkTheBox();">
  <input type="checkbox" name="midlevelusers[]" value="1" /> 1 &nbsp;&nbsp;
  <input type="checkbox" name="midlevelusers[]" value="2" /> 2 &nbsp;&nbsp;
  <input type="checkbox" name="midlevelusers[]" value="3" /> 3 &nbsp;&nbsp;
  <input type="checkbox" name="midlevelusers[]" value="4" /> 4 &nbsp;&nbsp;
  <input type="checkbox" name="midlevelusers[]" value="5" /> 5 &nbsp;&nbsp;
  <input type="submit" value="Submit Form" />
</form>

<script type="text/javascript">
  function checkTheBox() {
    var flag = 0;
    for (var i = 0; i< 5; i++) {
      if(document.myform["midlevelusers[]"][i].checked){
        flag ++;
      }
    }
    if (flag != 1) {
      alert ("You must check one and only one checkbox!");
      return false;
    }
    return true;
  }
</script>