如何正确为循环中的多个单选按钮绑定事件处理函数

本文解释为何在 for 循环中直接为 radio 元素赋值 `onclick` 会导致所有按钮点击时都显示最后一个值，并提供使用 `addeventlistener` 和事件委托两种现代、可靠的解决方案。

你遇到的问题本质上是 JavaScript 闭包与变量作用域的经典陷阱。原始代码看似为每个单选按钮独立绑定了点击事件，但实际执行时，所有箭头函数共享同一个 i 变量（在循环结束后 i === radio.length），且 radio[i] 在事件触发时已越界，导致运行时错误或意外行为（如始终弹出 undefined）。

更关键的是：onclick = handler 是为每个元素单独设置事件处理器，而非“一次性触发”——只要该元素被点击，处理器就会执行。因此每次点击都会触发对应绑定的函数，这完全符合预期，问题不在于“为何多次执行”，而在于“为何总是显示错误的值”。

✅ 正确做法一：使用 let 声明 + addEventListener

let 在每次循环迭代中创建块级作用域，确保每个回调函数捕获当前轮次的 radio[i]：

const radio = document.getElementsByName('subject');

for (let i = 0; i < radio.length; i++) {
    radio[i].addEventListener('click', () => {
        alert(`You chose ${radio[i].value}.`);
    });
}

✅ 优势：语义清晰、支持多个监听器、错误可捕获、兼容性好（IE9+）。

⚠️ 注意：若后续需移除监听器，应保存函数引用：

for (let i = 0; i < radio.length; i++) {
    const handler = () => alert(`You chose ${radio[i].value}.`);
    radio[i].addEventListener('click', handler);
    // 后续可调用 radio[i].removeEventListener('click', handler)
}

✅ 正确做法二：事件委托（推荐用于动态内容）

将监听器统一绑定到父容器（如

document.querySelector('fieldset').addEventListener('click', (e) => {
    if (e.target.type === 'radio' && e.target.name === 'subject') {
        alert(`You chose ${e.target.value}.`);
    }
});