HTML 如何要求至少勾选一个复选框才能提交表单

在本文中，我们将介绍如何使用 HTML 表单元素和 JavaScript 来要求用户至少勾选一个复选框才能提交表单。

阅读更多：HTML 教程

使用 required 属性

在 HTML5 中，表单元素的 required 属性可以用于验证用户输入是否符合要求。这个属性可以使用在各种输入字段上，包括复选框。

要求至少勾选一个复选框，可以将它们放在同一个 <fieldset> 元素中，并设置其中一个复选框为 required。这样，如果用户未勾选任何一个复选框，表单将无法提交。

以下是一个示例代码：

<form>
  <fieldset>
    <legend>请选择至少一种水果：</legend>
    <input type="checkbox" id="apple" name="fruit" value="apple" required>
    <label for="apple">苹果</label><br>
    <input type="checkbox" id="orange" name="fruit" value="orange">
    <label for="orange">橙子</label><br>
    <input type="checkbox" id="banana" name="fruit" value="banana">
    <label for="banana">香蕉</label><br>
  </fieldset>

  <input type="submit" value="提交">
</form>

在上面的示例中，第一个复选框设置了 required 属性，而其他复选框没有设置。如果用户没有勾选任何一个复选框，点击提交按钮时，浏览器会显示一个错误提示，并阻止表单的提交。

使用 JavaScript 进行验证

除了使用 HTML 的 required 属性，我们还可以使用 JavaScript 来进行更复杂的验证。

首先，给表单元素添加一个 onSubmit 事件处理程序，当用户点击提交按钮时，会触发这个事件处理程序。

然后，在事件处理程序中，我们可以使用 JavaScript 来检查哪些复选框被选中。如果没有复选框被选中，我们可以阻止表单的提交，并给用户一个错误提示。

以下是使用 JavaScript 进行验证的示例代码：

<script>
  function validateForm(event) {
    var checkboxes = document.getElementsByName("fruit");
    var checkedCount = 0;

    for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].checked) {
        checkedCount++;
      }
    }

    if (checkedCount === 0) {
      event.preventDefault(); // 阻止表单提交
      alert("请至少勾选一个复选框！");
    }
  }
</script>

<form onsubmit="validateForm(event)">
  <fieldset>
    <legend>请选择至少一种水果：</legend>
    <input type="checkbox" id="apple" name="fruit" value="apple">
    <label for="apple">苹果</label><br>
    <input type="checkbox" id="orange" name="fruit" value="orange">
    <label for="orange">橙子</label><br>
    <input type="checkbox" id="banana" name="fruit" value="banana">
    <label for="banana">香蕉</label><br>
  </fieldset>

  <input type="submit" value="提交">
</form>

在上面的示例中，我们定义了一个名为 validateForm 的 JavaScript 函数，它接受一个事件参数。在这个函数中，我们通过 document.getElementsByName 方法获取所有 name 为 “fruit” 的复选框，并使用一个变量 checkedCount 来计算被选中的复选框数量。如果 checkedCount 的值为 0，我们阻止表单的提交，并显示一个提示框告诉用户至少需要勾选一个复选框。