本文详解为何在 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（明确、安全）

Gradle 9.8.0

下载

const radios = document.querySelectorAll('input[name="subject"]');

radios.forEach((radio, index) => {
    radio.addEventListener('click', () => {
        alert(`You chose ${radio.value}.`);
    });
});

✅ 推荐解法二：事件委托（高效、动态友好）

将监听器绑定到共同父容器（如

），利用事件冒泡和 event.target 判断来源：

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

✅ 进阶：使用 change 事件替代 click（语义更准确）

单选按钮的值变更应在 change 事件中响应（用户确认选择后触发，避免误点）：

radios.forEach(radio => {
    radio.addEventListener('change', (e) => {
        console.log('Selection confirmed:', e.target.value);
    });
});

? 注意事项总结：

• 避免直接赋值 element.onclick = handler：仅支持单个监听器，覆盖风险高；
• 优先使用 addEventListener()，支持多监听器、可移除（removeEventListener）、语义清晰；
• 对于动态添加的表单控件，事件委托是唯一健壮方案；
• change 比 click 更符合表单交互语义（尤其对键盘操作、辅助技术更友好）；
• 始终用 querySelectorAll 替代 getElementsByName（返回静态 NodeList，更易操作）。

掌握这些模式，你不仅能修复当前问题，更能写出可维护、可扩展、符合现代 Web 标准的事件处理逻辑。