实现checkbox单选联动取消功能 修复勾3自动勾2、无法取消勾选问题

• 联动异常来源：代码中硬编码了索引1、2的两个checkbox（即第2、第3个控件）的特殊判断分支，只要满足触发条件就强制将两个控件的选中状态同时设为true，没有匹配实际交互需求的逻辑支撑，直接造成了点击第3个checkbox时自动联动选中第2个控件的异常。
• 无法取消选中的来源：在遍历清空所有同组checkbox的选中状态后，代码直接执行了obj.checked = true的强制赋值，完全覆盖了用户点击操作的真实意图——不管用户是想选中控件、还是想取消已选中控件的状态，最终都会被强制改成选中状态，导致没有办法通过点击取消任意checkbox的选中。

原代码的两处冗余逻辑，完全偏离了“同组多选框联动互斥、保留可取消能力”的设计目标

核心调整思路：

1. 删除所有针对特定索引checkbox的硬编码特殊判断逻辑
2. 遍历同组checkbox时，仅对非当前点击的控件执行清空选中状态的操作
3. 不对当前用户点击的控件做强制状态赋值，完全保留浏览器默认的点击状态切换结果，让互斥逻辑和取消操作可以共存

修正后的JS实现 #

var cbs = document.getElementsByName("test");

function demo(obj) {
    for (var i = 0; i < cbs.length; i++) {
        // 仅清空非当前点击的同组checkbox的选中状态
        if (cbs[i] !== obj) {
            cbs[i].checked = false;
        }
    }
}

原有HTML代码无需调整 #

checkbox 1 <input type="checkbox" name="test" id="demo1" value="demo01" onClick="demo(this)">
checkbox 2  <input type="checkbox" name="test" id="demo2" value="demo02" onClick="demo(this)">
checkbox 3  <input type="checkbox" name="test" id="demo3" value="demo03" onClick="demo(this)">
checkbox 4  <input type="checkbox" name="test" id="demo" value="demo04" onClick="demo(this)">

• 手动点击任意checkbox完成选中操作时，其余所有同组name="test"的checkbox都会自动取消选中，不会出现跨控件强制联动选中其他项的问题；只有用户手动点击第2个checkbox时，它才会被选中
• 点击已经处于选中状态的checkbox时，可以正常取消其选中状态，不存在强制锁定选中的问题

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