为什么我的单选框change事件未按预期工作，仅第一个可触发？

问题原因 #

• document.querySelector 仅返回匹配选择器的第一个DOM元素，你只给第一个单选框绑定了change事件，第二个单选框没有绑定对应事件，因此选中第二个时不会触发弹窗。

修复方案 #

无需修改原有HTML结构，可选择以下两种实现方式：

方案1：遍历所有单选框绑定事件 #

使用querySelectorAll选中全部同name的单选框，逐个绑定事件：

// 原有取消默认选中的逻辑保留
document.querySelector('input[name="answer"]:checked').checked = false;
// 选中所有符合条件的单选框
const allRadios = document.querySelectorAll('input[name="answer"]');
// 遍历绑定事件
allRadios.forEach(radio => {
  radio.addEventListener('change', e => alert(e.target.value))
})

方案2：事件委托实现 #

利用事件冒泡特性，给父元素绑定事件，减少事件绑定次数，兼容性更好：

document.querySelector('input[name="answer"]:checked').checked = false;
// 给包裹单选框的父div绑定事件
document.querySelector('div').addEventListener('change', e => {
  if (e.target.tagName === 'INPUT' && e.target.name === 'answer') {
    alert(e.target.value)
  }
})

内容的提问来源于stack exchange，提问作者李伯均