如何实现复选框组切换及点击已选中项取消选中功能？

需求与问题 #

需要实现这样的复选框交互逻辑：

• 点击未选中的复选框时，取消当前所有已选中项，同时选中该项
• 点击已选中的复选框时，直接取消它的选中状态

现有代码仅能完成单选切换（点击未选中项时切换选中，但无法取消已选中项的状态），需要优化逻辑以支持取消选中操作。

现有代码 #

HTML

<input type="checkbox" value="Option1">
<input type="checkbox" value="Option2">
<input type="checkbox" value="Option3">

JavaScript

const checkBoxes = document.querySelectorAll('input[type="checkbox"]');
checkBoxes.forEach((checkBox) => {
    checkBox.addEventListener('click', () => {
        checkBoxes.forEach((checkBox) => {
            checkBox.checked = false;
        });

        checkBox.checked = true;

    });
});

优化后的解决方案 #

优化后的JavaScript代码

const checkBoxes = document.querySelectorAll('input[type="checkbox"]');

checkBoxes.forEach(checkbox => {
  checkbox.addEventListener('click', function() {
    // 提前记录点击前的选中状态（点击动作会立即改变checked值）
    const wasPreviouslyChecked = this.checked;
    
    // 先统一取消所有复选框的选中状态
    checkBoxes.forEach(cb => cb.checked = false);
    
    // 根据点击前的状态决定是否选中当前项
    if (!wasPreviouslyChecked) {
      this.checked = true;
    }
  });
});

逻辑说明 #

1. 记录初始状态：在点击事件触发时，先把当前复选框的checked状态存入变量——因为点击动作会立刻改变复选框的选中状态，必须提前获取才能判断用户操作的是已选中还是未选中的项。
2. 重置全局选中状态：先将所有复选框设为未选中，这是实现单选逻辑的基础。
3. 分支处理操作：
   • 如果点击前复选框是未选中状态，就将其设为选中（完成单选切换）
   • 如果点击前已经是选中状态，就保持取消状态（实现取消选中的需求）

内容的提问来源于stack exchange，提问作者popov