如何修复复选框单选功能异常：新框不取消旧框、取消时反向选中

原代码的核心问题有两个：

1. 循环中找到第一个非当前复选框就执行操作并break，导致仅修改了第一个匹配项，其他复选框完全没被处理——这就是选中Chapter4后再选Chapter1时Chapter4不取消的原因。
2. 逻辑判断错误：把所有非当前复选框的checked设为!obj.checked，当取消当前复选框（obj.checked为false）时，!obj.checked就是true，会把第一个非当前复选框强制选中——这就是取消Chapter1时Chapter2被选中的问题根源。

正确的逻辑应该是：

• 当当前复选框被选中时，遍历所有同组复选框，取消除当前外的所有复选框选中状态。
• 当当前复选框被取消选中时，不对其他复选框做任何操作，保留它们的状态（满足“可点击取消选中”的需求）。

修正后的代码 #

JavaScript #

function uncheck(obj) {
  // 只有当前复选框被选中时，才取消其他复选框
  if (obj.checked) {
    var ch = document.getElementsByName('ch');
    for (var i = 0; i < ch.length; i++) {
      if (ch[i] !== obj) {
        ch[i].checked = false;
      }
    }
  }
}

HTML（保持原结构即可） #

<input type="checkbox" name="ch" id="Chapter 1" onclick="uncheck(this)">
<input type="checkbox" name="ch" id="Chapter 2" onclick="uncheck(this)">
<input type="checkbox" name="ch" id="Chapter 3" onclick="uncheck(this)">
<input type="checkbox" name="ch" id="Chapter 4" onclick="uncheck(this)">
<input type="checkbox" name="ch" id="Chapter 5" onclick="uncheck(this)">
<input type="checkbox" name="ch" id="Chapter 6" onclick="uncheck(this)">
<input type="checkbox" name="ch" id="Chapter 7" onclick="uncheck(this)">
<input type="checkbox" name="ch" id="Chapter 8" onclick="uncheck(this)">
<input type="checkbox" name="ch" id="Chapter 9" onclick="uncheck(this)">
<input type="checkbox" name="ch" id="Chapter 10" onclick="uncheck(this)">
<input type="checkbox" name="ch" id="Chapter 11" onclick="uncheck(this)">
<input type="checkbox" name="ch" id="Chapter 12" onclick="uncheck(this)">
<input type="checkbox" name="ch" id="Chapter 13" onclick="uncheck(this)">
<input type="checkbox" name="ch" id="Chapter 14" onclick="uncheck(this)">

更优写法（移除内联事件） #

如果想更符合现代前端规范，建议移除内联onclick，改用事件委托：

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const checkboxGroup = document.querySelectorAll('input[name="ch"]');
  checkboxGroup.forEach(checkbox => {
    checkbox.addEventListener('click', function() {
      if (this.checked) {
        checkboxGroup.forEach(other => {
          if (other !== this) {
            other.checked = false;
          }
        });
      }
    });
  });
});

对应的HTML只需去掉onclick属性：

<input type="checkbox" name="ch" id="Chapter 1">
<input type="checkbox" name="ch" id="Chapter 2">
<!-- 其余复选框结构同上 -->

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