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

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()"> 

& hellip; к этому:

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

Fiddle

Answer 2

Что-то, как это будет убедиться, что по крайней мере, один флажок

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>