单选框click事件获取checked属性值错误的原因及更优解决方案问询

• 浏览器处理单选框交互的事件时序固定：先执行click事件的全流程回调，再触发默认的checked状态更新、change事件派发。
• 你在click回调中调用的ev.preventDefault()进一步干扰了状态同步的时序，导致回调执行时checked属性还未完成更新，拿到的是不符合预期的固定值。
• 你使用的setTimeout 0本质是利用JS事件循环的调度规则：把回调放到下一轮宏任务队列执行，此时浏览器已经完成了当前事件循环内的UI状态更新，因此可以拿到正确的checked值。

方案1：监听change事件（最优） #

change事件本身就是在表单控件的状态完成更新后才触发，天然不存在时序不同步问题，也不需要额外的定时器：

const radio = document.querySelector('input[type=radio]')
radio.addEventListener('change', (ev) => {
  // 直接就能拿到更新后的checked值
  console.log(ev.target.checked);
})

如果没有特殊的阻止默认交互的需求，建议直接移除ev.preventDefault()调用，避免干扰单选框的正常行为。

方案2：使用微任务调度（必须监听click事件时使用） #

如果业务逻辑要求必须监听click事件且需要保留ev.preventDefault()，可以用queueMicrotask替代setTimeout 0，微任务的执行优先级远高于宏任务setTimeout，不会产生多余的执行延迟，性能更优：

const radio = document.querySelector('input[type=radio]')
radio.addEventListener('click', (ev) => {
  ev.preventDefault();
  queueMicrotask(() => {
    console.log(ev.target.checked);
  });
})

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