如果用戶必須至少選中一個復選框，如何驗證表單？

Question

我正在嘗試驗證表單是否至少選中了一個復選框。 但 JavaScript 函數並未對其進行驗證。

function checkMe() {
  document.getElementById("frm").onsubmit = function() {
    if ((document.getElementById("c1").checked == false) && (document.getElementById("c2").checked == false) && (document.getElementById("c3").checked == false) && (document.getElementById("c4").checked == false)) {
      alert("pleast tick atleast one");
      return false;
    } else {
      return true;
    }
  };
}
window.onload = function() {
  checkMe();
}

HTML 代碼在這里：在選中至少一個復選框之前不應提交

<form action="xyz.php" id="frm" name="frm">
    <select name="loc">
    <option value="1">1</option>
        <option value="2">2</option>
        <option value="11">11</option>
        <option value="22">22</option>
    </select>
        <br><br><p>Services</p><br>
        <dd>
        <div class="multiSelect">
            <ul>
            <li>
                <input id="c1" type="checkbox" value="a" name="ch1">a
                </li>
                <li>
                <input id="c2" type="checkbox" value="b" name="ch2">b
                </li>
                <li>
                <input id="c3" type="checkbox" value="c" name="ch3">c
                </li>
                <li>
                <input id="c4" type="checkbox" value="d" name="ch4">d
                </li>
            </ul>
            </div>
        </dd>
        <br>
        <br><input type="submit" value="Done!" id="bttn">
    </form>

Answer 1

您的代碼運行良好，沒有任何錯誤。 無需更改。 看下面的片段，

另一件事是沒有必要在if條件下與 false 進行compare 。

 function checkMe() { document.getElementById("frm").onsubmit = function() { if ((!document.getElementById("c1").checked) && (!document.getElementById("c2").checked) && (!document.getElementById("c3").checked) && (!document.getElementById("c4").checked)) { console.log("pleast tick atleast one"); // Check console for warning return false; } else { return true; } }; } window.onload = function() { checkMe(); }

 <form action="xyz.php" id="frm" name="frm"> <select name="loc"> <option value="1">1</option> <option value="2">2</option> <option value="11">11</option> <option value="22">22</option> </select> <br> <br> <p>Services</p> <br> <dd> <div class="multiSelect"> <ul> <li> <input id="c1" type="checkbox" value="a" name="ch1">a </li> <li> <input id="c2" type="checkbox" value="b" name="ch2">b </li> <li> <input id="c3" type="checkbox" value="c" name="ch3">c </li> <li> <input id="c4" type="checkbox" value="d" name="ch4">d </li> </ul> </div> </dd> <br> <br> <input type="submit" value="Done!" id="bttn"> </form>

Answer 2

這是我的解決方案。

function checkMe(){
         document.getElementById("frm").onsubmit=function(){
         var i,b=0;
         for(i=1;i<4;i++){
                  (function(i){
                            if(document.getElementById('c'+i).checked){
                            // if its checked, then increase b value
                                     b++
                            }
                  })(i);
         }
         return ((b>0)?true:false); /* return true if b value is 
         bigger than 0, 
         b is the value of checkboxes checked */
     };
}
window.onload = function() {
    checkMe();
}

更好的檢查方法。