如何使用JavaScript驗證複選框

-5

我在驗證複選框時遇到問題。我一直在谷歌，但我發現的大部分解決方案是jQuery（w/c我不知道）或不工作。如何使用JavaScript驗證複選框

<body> 
<form action="" method="POST" id="myForm" onSubmit="return validateCheckBox()"> 
    <input type="checkbox" value="beyanetu_1" name="foods[]" > 
    <input type="checkbox" value="beyanetu_2" name="foods[]" > 
    <input type="checkbox" value="beyanetu_3" name="foods[]" > 
    <input type="checkbox" value="beyanetu_4" name="foods[]" > 
    <input type="checkbox" value="beyanetu_5" name="foods[]" > 
    <input type="checkbox" value="beyanetu_6" name="foods[]" > 

    <input type="image" src="logo/order-online_4.png" height="50px" width="100px" > 
</form>  
<script> 
    function validateCheckBox(){ 
       //I want to know how to retrieve the data and 
       //check if at least one is checked 
      } 
</script> 
</body>

這不是一個重複的問題，在這篇文章中的鏈接是JQuery，我說不知道。 EDIT：我真的不知道你爲什麼低估這個！

來源

2017-08-14 Lul Gate

，確定是否一個複選框被以稍微奇怪的方式檢查工作（使用'：checked'選擇器） –

[簡單的JavaScript複選框驗證]的可能的複製（HTTPS：/ /stackoverflow.com/questions/11234622/simple-javascript-checkbox-validation） – Sand

可能的重複[如何檢查頁面上是否有任何複選框選中？]（https://stackoverflow.com/questions/9119407/how-do-i-check-if-any-checkbox-all-on-the-the-page-are-checked） – Niklas

-2

的的type複選框input不斷在房地產的選中狀態稱爲checked。因此，我會循環訪問formelements並查看是否有任何複選框已被選中。很顯然，如果你在同一個表單中有更多這樣的複選框組，你還必須根據他們的名字來增強每一組複選框的代碼。

function validateCheckBox(form) { 
 
    var tmp = false; 
 
    for (var i in form.elements) { 
 
    var el = form.elements[i]; 
 

 
    if (el.type == 'checkbox' && el.checked) tmp = true; 
 
    } 
 
    console.log(tmp); 
 
    return tmp; 
 

 
}

<form action="" method="POST" id="myForm" onSubmit="return validateCheckBox(this);"> 
 
    <input type="checkbox" value="beyanetu_1" name="foods[]"> 
 
    <input type="checkbox" value="beyanetu_2" name="foods[]"> 
 
    <input type="checkbox" value="beyanetu_3" name="foods[]"> 
 
    <input type="checkbox" value="beyanetu_4" name="foods[]"> 
 
    <input type="checkbox" value="beyanetu_5" name="foods[]"> 
 
    <input type="checkbox" value="beyanetu_6" name="foods[]"> 
 

 
    <input type="image" src="logo/order-online_4.png" height="50px" width="100px"> 
 
</form>

jQuery中

來源

2017-08-14 09:09:31 bluehipy

未定義的屬性'複選框'從「函數validateCheckBox（表單）」中的「表單」來自哪裏？ –

從onSubmit處理函數傳入'this'參數'onSubmit =「返回validateCheckBox（this）;」' – bluehipy

謝謝。你的代碼實際上工作。 –

-2

您需要爲每個複選框添加ids。在這裏，建議固定：

<body> 
<form action="" method="POST" id="myForm" onSubmit="return validateCheckBox()"> 
    <input type="checkbox" value="beyanetu_1" name="foods[]" > 
    <input type="checkbox" value="beyanetu_2" name="foods[]" > 
    <input type="checkbox" value="beyanetu_3" name="foods[]" > 
    <input type="checkbox" value="beyanetu_4" name="foods[]" > 
    <input type="checkbox" value="beyanetu_5" name="foods[]" > 
    <input type="checkbox" value="beyanetu_6" name="foods[]" > 

    <input type="image" src="logo/order-online_4.png" height="50px" width="100px" > 
</form>  
<script> 
    function validateCheckBox(){return this.form.checkbox.checked;} 
</script> 
</body>

來源

2017-08-14 09:07:35

給他們每個ID然後逐個明確地逐一解決這個問題是一個可怕的方法。無論如何，你的代碼不會工作。你有任務你應該比較。 – Quentin

知道了，但它們只是5個元素，它是一個可怕的方法。它是表演還是什麼？ –

它臃腫，難以維持。 – Quentin

如何使用JavaScript驗證複選框

回答

相關問題