JavaScript-多个复选框验证无效

Question

我有一个表格

<form method="post" action="" onsubmit="validate()">
<input type="checkbox" name="del[]" value="1">
<input type="checkbox" name="del[]" value="2">
<input type="checkbox" name="del[]" value="3">
<input type="checkbox" name="del[]" value="4">
<input type="checkbox" name="del[]" value="5">
<button type="submit" class="btn btn-danger btn-lg">delete</button>
</form>

我尝试使用 JavaScript 进行复选框验证，如果人们没有 select 一个复选框，它会显示一条消息，如果人们 select 一个或多个复选框, 它将显示确认警报以确认 submit.But 我的 JavaScript 不工作。表单将在未经验证的情况下提交。

    <script>
    function validate() {
        var checkbox=document.getElementsByName("del[]");
        if (checkbox.checked == null || x == "") {
            alert("Please select!");
            var check=false;
            return false;
        }

        if(check != false && !confirm('confirm submit?')){
            e.preventDefault();
            return false;
        }
        return true;
    }
   </script>

我该如何解决这个问题？

Answer 1

这样的事情将确保至少一个复选框被选中

document.getElementById('myform').onsubmit = function (e) {
  var checkbox = document.getElementsByName("del[]"),
      i,
      checked;
  for (i = 0; i < checkbox.length; i += 1) {
    checked = (checkbox[i].checked||checked===true)?true:false;
  }

  if (checked == false) {
    alert('Check Something!');
    e.preventDefault();
    return false;
  } else if(confirm('confirm submit?')) {
    alert('done!');
    return true;
  }
}

<form id="myform">
  <input type="checkbox" name="del[]" value="1">
  <input type="checkbox" name="del[]" value="2">
  <input type="checkbox" name="del[]" value="3">
  <input type="checkbox" name="del[]" value="4">
  <input type="checkbox" name="del[]" value="5">
  <button type="submit" class="btn btn-danger btn-lg">delete</button>
</form>

Answer 2

getElementsByName returns 一组对象。该集合没有 checked 属性，因此失败：

var checkbox = document.getElementsByName("del[]");
if (checkbox.checked == null ...  //error, no "checked" property

一个简单的替代方法是使用 document.querySelector 来查找单个选中的输入：

function validate() {
  var checkbox= document.querySelector('input[name="del[]"]:checked');
  if(!checkbox) {
    alert('Please select!');
    return false;
  }
  else return confirm('confirm submit?');
}

此外，更改此：

<form method="post" action="" onsubmit="validate()">

… 对此：

<form method="post" action="" onsubmit="return validate()">

Fiddle

Answer 3

另一种简单的方法是在加载表单和单击提交按钮时创建和调用函数 validate()。通过使用 checked 属性我们检查复选框是否被选中。 cbox[0] 有一个索引 0 用于访问 name="del[]"

的第一个值（即 1）

您可以执行以下操作：

function validate() {
  var cbox = document.forms["myForm"]["del[]"];
  if (
    cbox[0].checked == false &&
    cbox[1].checked == false &&
    cbox[2].checked == false
  ) {
    alert("Please Check Something");
    return false;
  } else if (confirm("Confirm Submit?")) {
    alert("Successfully Submited");
    return true;
  }
}

<form onload="return validate()" name="myForm">
  <input type="checkbox" name="del[]" value="1"> 1
  <input type="checkbox" name="del[]" value="2"> 2
  <input type="checkbox" name="del[]" value="3"> 3
  <input type="checkbox" name="del[]" value="4"> 4
  <input type="checkbox" name="del[]" value="5"> 5 <br>
  <input type="submit" value="Delete" onclick="validate()">
</form>

演示： CodePen

JavaScript-多个复选框验证无效

JavaScript-multiple checkbox validation not work

javascript

forms

checkbox