时间戳

首页 > 解决方案 > 单击提交js条件需要多个复选框

javascript - 单击提交js条件需要多个复选框

问题描述

我目前正在尝试制作一个表单，其中需要多项内容，例如姓名电子邮件等需要提交表单这是我一直在尝试的方式。在 checkbox.value 我试过 <2. 这里也是 html 中复选框的代码。

       if (checkbox.value   ) {
messages.push('Two intrests must be selected')

}

       <div class="form-check form-check-column">
     <label class="form-check-label">
       <input class="form-check-input" type="checkbox" name="Sports" id="Box" value=1> Sports
     </label>
     <label class="form-check-label">
       <input class="form-check-input" type="checkbox" name="Reading" id="Box" value=1> Reading
      </label>
      <label class="form-check-label">
       <input class="form-check-input" type="checkbox" name="Hacking" id="Box" value=1> Hacking
      </label>
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox" name="Gaming" id="Box" value=1> Gaming
      </label>
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox" name="Other" id="Box" value=1 > Other
      </label>

标签： javascripthtml

解决方案

您可以将一个简单的 id 添加到复选框的容器中，然后为每个选中的复选框加上一个计数器 +1 以检查是否等于或加上 2，例如：

function Check()
{
  var howmuch = 0;
  var container = document.getElementById('container');
  var checkbox = container.querySelectorAll('input[type="checkbox"]');
//You can use short without var like  document.getElementById('container').querySelectorAll('input[type="checkbox"]')
  checkbox.forEach(function(item) {
    if(item.checked){howmuch += 1}
  });
  
  if(howmuch >= 2){
    console.log('ok');
  }else{
    console.log('MUST BE 2 or +');
  }

}
<div class="form-check form-check-column" id="container">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" name="Sports" id="Box" value=1> Sports
  </label>
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" name="Reading" id="Box" value=1> Reading
  </label>
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" name="Hacking" id="Box" value=1> Hacking
  </label>
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" name="Gaming" id="Box" value=1> Gaming
  </label>
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" name="Other" id="Box" value=1 > Other
  </label>
</div>
<button onClick="Check();">simulate form</button>

显然你会console.log用一个动作来改变我的，比如alertif is not ok 和 form submit if is ok （记得event.preventdefault()在检查一切是否正常之前使用防止提交）

推荐阅读