本文详解为何在 for 循环中为多个单选按钮绑定 onclick 会导致所有点击都触发同一值（如始终弹出 `undefined` 或最后一个值），并提供使用 `addeventlistener` 和事件委托的现代、可靠解决方案。
你遇到的问题本质上是 闭包与变量作用域的经典误区，而非事件机制本身“异常”。在原始代码中：
const radio = document.getElementsByName('subject');
for (let i = 0; i < radio.length; i++) {
radio[i].onclick = () => {
alert(`You chose ${radio[i].value}.`);
};
}表面上看，每次循环都为不同 元素绑定了独立的点击处理函数；但关键在于：箭头函数内部引用的是 块级作用域变量 i。由于 var 已被 let 替代，此处 i 具有块级绑定（block-scoped），本应避免经典 var 提升问题——但请注意：let 在 for 循环中为每次迭代创建新绑定，因此这段代码 实际能正常工作（现代浏览器中会正确输出对应 value）。
⚠️ 然而，真正危险且更常见的错误写法是使用 var：
// ❌ 危险示例（极易出错）
for (var i = 0; i < radio.length; i++) {
radio[i].onclick = function() {
alert(`You chose ${radio[i].value}.`); // i 总是 radio.length，越界 → undefined
};
}此时所有回调共享同一个 i 变量，循环结束后 i === radio.length，点击任一按钮都会读取 radio[radio.length].value → undefined。
立即学习“Java免费学习笔记（深入）”；
✅ 推荐解法一：使用 addEventListener + let（明确、安全）
const radios = document.querySelectorAll('input[name="subject"]');
radios.forEach((radio, index) => {
radio.addEventListener('click', () => {
alert(`You chose ${radio.value}.`);
});
});✅ 推荐解法二：事件委托（高效、动态友好）
将监听器绑定到共同父容器（如
