同name单选框切换时，原选中项为何不触发onchange事件？

这其实是HTML规范对不同表单控件change事件的定义差异造成的，我给你理清楚其中的逻辑：

单选框的互斥特性与事件触发规则 #

单选框（type="radio"）是互斥组控件——同一个name属性的单选框，同一时间只能有一个处于选中状态。当你点击另一个单选框完成切换时：

• 只有新被选中的单选框会触发change事件，因为它的状态是通过用户直接交互，从「未选中」变为「选中」；
• 原来的选中项虽然状态从「选中」变成了「未选中」，但这个变化是浏览器为了维护互斥规则被动触发的，并非用户直接操作该元素导致的，所以不会触发它的change事件。

复选框的事件逻辑差异 #

而复选框（type="checkbox"）没有互斥限制，每个复选框的状态都是独立可控的：

• 用户可以主动勾选或取消勾选任意一个复选框，每一次状态变更都是用户直接操作该元素的结果，所以无论是从「未选中」到「选中」，还是反过来，都会触发change事件。

如何监听单选框组的状态变化 #

如果需要捕获整个单选框组的状态切换，不需要给每个单选框单独绑定监听，用事件委托更高效：给单选框组的父元素绑定change事件，就能捕获到每次切换时新选中项触发的事件，从而获取当前选中状态。举个简单的例子：

<div class="radio-group">
  <input type="radio" name="fruit" value="apple">苹果
  <input type="radio" name="fruit" value="banana">香蕉
  <input type="radio" name="fruit" value="orange">橙子
</div>
<script>
document.querySelector('.radio-group').addEventListener('change', (e) => {
  if (e.target.matches('input[type="radio"]')) {
    console.log('当前选中的水果：', e.target.value);
  }
});
</script>

这样不管你切换哪个单选框，都能实时拿到最新的选中结果~

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