点击None复选框无法取消其他已勾选复选框的技术问题求助

我帮你找出了几个导致功能失效的问题，咱们一步步来修复：

1. HTML中的ID重复问题 #

你所有复选框都用了id="none"，这是不符合HTML规范的——id在页面中必须是唯一的，虽然你这里用class来选择元素暂时没直接影响，但这是不良实践，会给后续维护埋下隐患。先把ID改成唯一的，比如给「None」复选框单独设置id="chk-none"，其他的也各自命名：

<input class="form-check-input tab1_chk example" type="checkbox" name="2[]" onchange="uncheckOthers(this)" id="chk-1" value="1">Option 1 
<input class="form-check-input tab1_chk example" type="checkbox" name="2[]" onchange="uncheckOthers(this)" id="chk-2" value="2">Option 2 
<input class="form-check-input tab1_chk example" type="checkbox" name="2[]" onchange="uncheckOthers(this)" id="chk-3" value="3">Option 3 
<input class="form-check-input tab1_chk example" type="checkbox" name="2[]" onchange="uncheckOthers(this)" id="chk-none" value="4">None

2. JavaScript逻辑错误 #

你的原代码里，当检测到「None」复选框被勾选时，先执行了ele.checked = false;——这相当于刚勾选就立刻取消了它的状态，然后再取消其他复选框，完全违背了需求逻辑。另外，咱们还需要补充反向逻辑：当勾选其他选项时，如果「None」是勾选状态，也要把它取消掉，这样逻辑才完整。

修正后的JS代码：

<script>
function uncheckOthers(ele) {
    // 获取所有同组的复选框（class为example的）
    const allCheckboxes = $('.example');
    
    // 如果当前勾选的是「None」（value=4）
    if (ele.checked && ele.value === "4") {
        // 取消所有其他复选框的勾选，排除当前元素
        allCheckboxes.not(ele).prop('checked', false);
    } else {
        // 如果勾选的是其他选项，且「None」处于勾选状态，取消它
        if (ele.checked && $('#chk-none').prop('checked')) {
            $('#chk-none').prop('checked', false);
        }
    }
}
</script>

逻辑说明 #

• 当勾选「None」时：自动取消其他所有复选框的勾选，同时保持「None」自身的勾选状态。
• 当勾选任意其他选项时：如果「None」之前是勾选的，会自动取消「None」的勾选，避免出现同时勾选的矛盾情况。

这样修改后，就能完全实现你想要的功能了。

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