如何使用JavaScript取消选中所有其他复选框？附代码示例

要实现选中某一个复选框时自动取消其他所有同组复选框的功能，你可以按以下步骤修改代码：

步骤1：更新HTML的事件绑定 #

把每个复选框的onchange属性改成传入当前元素（this），让函数能直接拿到触发事件的复选框：

<div class="formControls">
  <label for="gdpr0" class="checkbox-inline">
    <input type="checkbox" name="form[gdpr][]" value="email" id="gdpr0" onchange="GDPRcheck(this);" class="gdpr-option rsform-checkbox">By email
  </label>
  <label for="gdpr1" class="checkbox-inline">
    <input type="checkbox" name="form[gdpr][]" value="phone" id="gdpr1" onchange="GDPRcheck(this);" class="gdpr-option rsform-checkbox">By phone
  </label>
  <!-- 其他复选框按同样方式修改 -->
</div>

步骤2：实现JavaScript函数 #

function GDPRcheck(currentCheckbox) {
  // 仅当当前复选框被选中时，才取消其他复选框
  if (currentCheckbox.checked) {
    // 获取所有带gdpr-option类的复选框
    const allCheckboxes = document.querySelectorAll('.gdpr-option');
    
    // 遍历所有复选框，取消选中除当前操作项外的所有选项
    allCheckboxes.forEach(checkbox => {
      if (checkbox !== currentCheckbox) {
        checkbox.checked = false;
      }
    });
  }
}

工作原理说明 #

• 传入当前元素：通过onchange="GDPRcheck(this)"直接传递当前操作的复选框，避免依赖全局event对象的潜在兼容性问题。
• 条件触发逻辑：只有用户选中复选框时才执行取消其他选项的操作——如果用户是取消选中当前复选框，其他选项会保持原样，允许用户选择「都不选」的状态。
• 批量处理复选框：用document.querySelectorAll('.gdpr-option')一次性获取所有目标复选框，通过forEach遍历并精准跳过当前操作项，高效完成取消选中的操作。

可选调整：强制必须选中一个选项 #

如果你希望用户不能取消所有复选框（必须保留一个选中项），可以修改函数为：

function GDPRcheck(currentCheckbox) {
  const allCheckboxes = document.querySelectorAll('.gdpr-option');
  allCheckboxes.forEach(checkbox => {
    // 仅让当前操作的复选框保持选中状态
    checkbox.checked = (checkbox === currentCheckbox);
  });
}

这样会实现类似单选按钮的效果，但保留复选框的视觉样式。

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