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

Live example

我们正在查看整个文档，这可能效率不高。如果你周围有一个容器（可能是你的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;
    }
 }

Live example

偏离主题：你还没有提到使用过库，所以我上面没有用过，但是如果你使用一个，那么这个东西很容易很多例如jQuery，Prototype，YUI，Closure或any of several others。例如，使用jQuery：

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

Live example其他库类似，但细节会有所不同。

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>

Answer 3

使用id＆＃39;

<input type="checkbox" name="midlevelusers[]" id="mlu1" value="1">
<input type="checkbox" name="midlevelusers[]" id="mlu2" value="2">
<input type="checkbox" name="midlevelusers[]" id="mlu3" value="3">
<input type="checkbox" name="midlevelusers[]" id="mlu4" value="4">

现在你可以做到

for (var i=1;i<5;i++){
  var el = document.getElementById('mlu'+i);
  if (el.checked) { /* do something */}
}

Answer 4

试试，

function validate() {
    var chk = document.getElementsByName('midlevelusers[]')
    var len = chk.length

    for(i=0;i<len;i++)
    {
         if(chk[i].checked){
        return true;
          }
    }
    return false;
    }

Answer 5

此功能会警告复选框是否已选中任何值。

function isChecked(checkboxarray){
    for (counter = 0; counter < checkboxarray.length; counter++){
        if (checkboxarray[counter].checked){
            alert("Checkbox has at least one checked");
        else{
            alert("None checked");
        }

您需要添加更多内容才能完成您真正想要做的事情，但这会让您走上正确的轨道！

Answer 6

您可以使用jQuery并以这种方式执行此操作：

if($('input[name="light[]"]:checked').length < 1){
            alert("Please enter the light conditions");
}

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

6 个答案: