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

您的代码工作正常，没有任何错误。无需更改。请看下面的代码段，

其他事情是compare条件下if无需{false}。

＆＃13;

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();
}

＆＃13;

<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>

＆＃13;

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();
}

更好的检查方式。

如果用户必须至少检查一个复选框，如何验证表单？

2 个答案: