如何在HTML中只选择一个复选框

在HTML中，我们常常需要使用复选框（checkbox）来让用户选择一个或多个选项。但有时候，我们需要只允许用户选择一个选项，而不是多个。这时候该怎么做呢？

以下介绍几种方法，让你在HTML中轻松实现只选择一个复选框的功能。

方法一：使用单选按钮（radio button）

单选按钮（radio button）与复选框类似，都可以让用户选择一个选项。不同的是，单选按钮一组中只能选择一个，而复选框可以选择多个。

使用单选按钮来实现只选择一个选项的功能非常简单。只需要把所有的复选框改为单选按钮即可。同一组中的多个单选按钮需要指定相同的name属性，这样它们才属于同一组，让用户只能选择其中的一个。

下面是一个示例代码片段，演示如何使用单选按钮实现只选择一个选项：

<form>
  <label>
    <input type="radio" name="option" value="A">
    Option A
  </label>
  <label>
    <input type="radio" name="option" value="B">
    Option B
  </label>
  <label>
    <input type="radio" name="option" value="C">
    Option C
  </label>
</form>

在以上代码中，我们定义了一个包含三个单选按钮的表单。这三个单选按钮都指定了相同的name属性，所以它们属于同一组，用户只能选择其中一个。

方法二：使用JavaScript

如果你不想使用单选按钮，也可以使用JavaScript来实现只选择一个复选框的功能。

实现的思路是：当用户选择一个复选框时，取消其它复选框的选择。具体实现中，我们可以给每个复选框都添加一个onclick事件处理函数，在函数内部判断其它复选框是否被选中，如有，则取消其它复选框的选中状态。

以下是一个实现该功能的示例代码片段：

<div>
  <label>
    <input type="checkbox" onclick="checkboxClick(this);" name="options" value="A">
    Option A
  </label>
  <label>
    <input type="checkbox" onclick="checkboxClick(this);" name="options" value="B">
    Option B
  </label>
  <label>
    <input type="checkbox" onclick="checkboxClick(this);" name="options" value="C">
    Option C
  </label>
</div>

<script>
function checkboxClick(currentCheckbox) {
  const checkboxes = document.getElementsByName("options");
  for (let i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i] !== currentCheckbox) {
      checkboxes[i].checked = false;
    }
  }
}
</script>

在以上代码中，我们定义了一个包含三个复选框的<div>元素。每个复选框都指定了相同的name属性，这样它们就属于同一组。

每个复选框都添加了一个onclick事件处理函数checkboxClick，该函数接收一个表示当前复选框的参数currentCheckbox。在函数中，我们首先获取该组复选框，然后遍历这些复选框，如果某个复选框不是当前复选框，则将其选中状态取消。这样就可以实现只选择一个选项的功能了。

以上两种方法都可以轻松实现只选择一个复选框的功能。你可以根据实际需求选择适合自己的方法。