Checkbox勾选异常求助：勾选Value=4选项后无法保持选中状态

嘿，我来帮你捋捋这个问题~

首先说核心的逻辑问题：你原来的代码里，当勾选value=4的复选框时，第一行就执行了ele.checked = false;，这直接把刚选中的复选框又给取消了，这就是它没法保持选中的根本原因。你去掉这行在jsfiddle里正常，但实际页面出问题，大概率是因为你HTML里所有复选框都用了同一个id="none"——HTML规范明确要求id必须是唯一的，重复的id会让浏览器解析DOM时出现各种不可预测的行为，这很可能就是实际页面和jsfiddle表现不一样的元凶。

接下来给你几个一步步解决的方案：

1. 先修复重复id的问题 #

把每个复选框的id改成唯一值，比如这样：

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

重复id是很多前端诡异bug的根源，比如选择器失效、事件绑定混乱，必须先把这个坑填上。

2. 修正JavaScript逻辑 #

去掉那行错误的ele.checked = false;，同时优化一下逻辑，避免把当前点击的复选框也取消选中：

function uncheckOthers(ele) {
  if(ele.checked && ele.value === "4") {
    // 只取消其他同class的复选框，排除当前点击的这个
    $('.example').not(ele).prop('checked', false);
    // 显式确保当前复选框保持选中，防止其他脚本干扰
    ele.checked = true;
  }
}

3. 确保jQuery的执行时机正确 #

如果你的实际页面里jQuery是在页面底部加载的，而你的脚本写在head里，会导致找不到元素或者$未定义的问题。建议把脚本放在</body>标签的前面，或者用DOM就绪事件包裹：

$(document).ready(function() {
  // 把函数放在这里，确保DOM加载完成后再执行
  function uncheckOthers(ele) {
    if(ele.checked && ele.value === "4") {
      $('.example').not(ele).prop('checked', false);
      ele.checked = true;
    }
  }
  // 也可以把HTML里的onchange改成jQuery事件绑定，更优雅
  $('.example').on('change', function() {
    uncheckOthers(this);
  });
});

这样能保证所有复选框都加载完成后再绑定事件，避免找不到元素的情况。

4. 检查是否有其他冲突脚本 #

如果上面几步都做了还是有问题，去看看实际页面里有没有其他JavaScript代码在修改复选框的状态——比如其他的onchange事件、点击事件，或者表单提交相关的脚本，这些都可能干扰当前复选框的选中状态。

按照这个步骤来，应该就能解决你实际页面里的异常问题了~

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