javascript中checkbox单选

通常情况下，使用 checkbox 元素来实现单选功能并不是最佳选择，因为 checkbox 元素本身就是用来表示多选的。

但是，如果你非常需要用 checkbox 元素来实现单选功能，可以使用以下两种方法：

1. 通过设置同名的 checkbox 元素的 onchange 事件，当其中一个 checkbox 被选中时，将其它 checkbox 的选中状态取消。

<label>
  <input type="checkbox" name="choice" value="option1" onchange="checkOnlyOne(this)"> Option 1
</label>
<label>
  <input type="checkbox" name="choice" value="option2" onchange="checkOnlyOne(this)"> Option 2
</label>
<label>
  <input type="checkbox" name="choice" value="option3" onchange="checkOnlyOne(this)"> Option 3
</label>

<script>
function checkOnlyOne(currentCheckbox) {
  const checkboxes = document.querySelectorAll('input[name="' + currentCheckbox.name + '"]');
  for (const checkbox of checkboxes) {
    if (checkbox !== currentCheckbox) {
      checkbox.checked = false;
    }
  }
}
</script>

以上代码创建了三个 checkbox 元素，它们的 name 属性值都为 `"choice"`，表示它们属于同一组。当其中一个 checkbox 被选中时，将其它 checkbox 的选中状态取消。具体实现是通过 onchange 事件调用 checkOnlyOne() 函数，该函数首先获取同名的所有 checkbox 元素，然后遍历它们，将除当前 checkbox 外的其它 checkbox 的选中状态设置为 false。

2. 通过设置同名的 radio 元素，使用 radio 元素来实现单选功能。

<label>
  <input type="radio" name="choice" value="option1"> Option 1
</label>
<label>
  <input type="radio" name="choice" value="option2"> Option 2
</label>
<label>
  <input type="radio" name="choice" value="option3"> Option 3
</label>

以上代码创建了三个 radio 元素，它们的 name 属性值都为 `"choice"`，表示它们属于同一组。radio 元素默认就是单选的，所以不需要任何 JavaScript 代码来实现。当其中一个 radio 元素被选中时，其它 radio 元素的选中状态会自动取消。