无法制作所需的复选框答案

【问题标题】：Trouble making checkboxes required无法制作所需的复选框
【发布时间】：2017-11-09 22:29:59
【问题描述】：

我正在寻求有关制作所需复选框的帮助。

我正在构建一个基于 bootstrap 4 的表单。我正在通过 bootstrap 文档中的 JS 示例验证表单，方法是在表单中添加“novalidate”，在输入中添加“required”，并添加以下脚本：

  (function() {
  'use strict';
   window.addEventListener('load', function() {
    var form = document.getElementById('forms');
     form.addEventListener('submit', function(event) {
      if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
       }
      form.classList.add('was-validated');

      }, false);
      }, false);
  })();

一切进展顺利，但现在我有几个复选框，我只想在用户至少选中一个时验证它。我想知道，我是否应该创建一个不同的函数来验证这一点，或者在当前函数的基础上构建。无论哪种情况，如果有人可以帮助我，我将不胜感激。

这是复选框的代码：

    <div class="form-row">
<div class="form-group col-md-4">
  <label for="checkboxes">Indícios:</label>
  <div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" id="" type="checkbox" value="1">
    1
  </label>
</div>

  <div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" value="2">
    2
  </label>
</div>

  <div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" value="3">
    3
  </label>
</div>

  <div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" value="4">
    4
  </label>
</div>

  <div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" value="5">
    5
  </label>
</div>
</div>

<div class="form-group col-md-4">

<label for="checkboxes1">&nbsp</label>
  <div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" id="checkboxes1" value="6">
    6
  </label>
</div>

  <div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" value="7">
    7.
  </label>
</div>

  <div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" value="8">
    8
  </label>
</div>

  <div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" value="9">
    9
  </label>
</div>

</div>
</div>

提前致谢！

【问题讨论】：

标签： javascript jquery html css bootstrap-4

【解决方案1】：

既然你提到你在这里使用 jQuery，你可以添加一个函数到你的 checkValidity 方法

function checkCheckboxes = function() {
    return ($('.form-check-input:checked').length > 0);
};

这个函数检查是否有任何带有 .form-check-input 类的输入，并且 :checked 状态在 html 中是否可用。如果是，则复选框验证有效。

【讨论】：

感谢您的快速回复！我真的认为这就是我所需要的，我无法在我自己的 tho 中添加该功能。一直在尝试，但似乎无法成功。顺便说一句，通过将其添加到 checkValidity 方法，验证样式也将应用于复选框，对吗？那太棒了。