选中同class复选框时取消其余选中状态的函数异常排查

你的代码没法实现需求，主要有这几个问题：

• 变量名写错了：循环条件里用了numbers.length，但你定义的变量是wordch，根本不存在numbers，循环直接执行不了。
• 逻辑覆盖不全：你只取消了当前选中项的前一个和后一个复选框，其他位置的（比如选中第一个，后面第三个及以后的）根本没处理，完全达不到“取消其余所有”的要求。
• 边界情况没处理：如果选中的是第一个复选框（i=0），i-1>0不成立，后面的复选框都不会被取消；如果选中最后一个，i+1 < wordch.length不成立，前面的也不会被取消，逻辑漏洞很大。

修复后的代码 #

要实现“选中一个时取消其余所有”的效果，正确逻辑应该是：当某个复选框被选中，遍历所有同class的复选框，把除了当前选中项之外的全部设为未选中。

方案一（直接绑定事件）：

const wordch = document.getElementsByClassName('checkboxes');

// 给每个复选框绑定点击事件
Array.from(wordch).forEach(checkbox => {
  checkbox.addEventListener('click', function() {
    if (this.checked) {
      // 遍历所有复选框，跳过当前选中的，其余设为未选中
      Array.from(wordch).forEach(other => {
        if (other !== this) other.checked = false;
      });
    }
  });
});

方案二（抽离函数）：

let wordch = document.getElementsByClassName('checkboxes');

function uncheck(current) {
  for (let i = 0; i < wordch.length; i++) {
    if (wordch[i] !== current) {
      wordch[i].checked = false;
    }
  }
}

// 绑定change事件（比click更准确，因为复选框状态变化可能来自键盘操作）
Array.from(wordch).forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    if (this.checked) uncheck(this);
  });
});

补充说明 #

• getElementsByClassName返回的是动态HTMLCollection，用Array.from转成数组才能方便用forEach遍历。
• 用change事件比click更稳妥，因为用户可能用键盘（比如空格）切换复选框状态，change能覆盖所有状态变化场景。

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