jQuery实现复选框互斥时获取选中值出现旧值问题如何解决

问题根因 #

代码执行顺序错误是核心原因：

• 点击新复选框触发change事件时，上一个被选中的复选框仍处于checked状态
• 你优先执行了已选中元素查询，此时查询结果会同时包含上一次选中的旧复选框和本次刚选中的新复选框
• jQuery的.val()方法默认返回匹配集合中第一个元素的值，因此大概率取到上一次的旧值
• 取消其他复选框选中状态的逻辑放在了取值之后，时机过晚

修复代码 #

调整执行顺序，先完成互斥逻辑再取值，同时优化选择器仅匹配复选框，避免和表单内的文本输入框冲突：

$("form input[type='checkbox']").change(function () {
  // 先执行互斥逻辑，取消同name下其他复选框的选中状态
  const sameNameChecks = $("input[name='" + this.name + "']");
  sameNameChecks.not(this).prop("checked", false);
  // 再查询当前选中的值，确保拿到的是最新值
  const currentChecked = sameNameChecks.filter(":checked");
  console.log(currentChecked.val());
});

优化建议 #

如果你的需求本身就是单选逻辑，直接使用原生type="radio"控件即可，同name的radio天然支持互斥，不需要额外写JS实现互斥效果，从根源上避免这类时序问题。

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