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進行復選框驗證，如果人們未選中復選框，則會顯示一條消息，如果人們選擇一個或多個復選框，則會顯示確認警報以確認提交。但是我的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返回對象的集合。 該集合沒有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()">

小提琴

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