onchange是radio最稳妥的选中事件监听方式，因其语义明确、仅在状态真正改变时触发；但需确保同组radio共用name属性，并注意IE兼容性及避免手动修改checked导致循环触发。
onchange 是 HTML <input type="radio"> 最稳妥的选中事件监听方式，但必须配合 name 分组和正确触发时机理解——否则在 IE 或某些表单交互场景下会失效。
为什么用 onchange 而不是 onclick
onchange 语义明确：只在“选中状态真正改变”时触发（比如从没选 → 选中，或从已选 → 切换到同组另一项），而 onclick 每次点击都触发，哪怕点的是已选中的项。这会导致重复执行、状态误判。
但要注意：onchange 在旧版 IE 中依赖“失去焦点”才触发，所以直接点击 radio 可能不立即响应。现代浏览器（Chrome/Firefox/Edge/Safari）已无此问题。
- 同一组 radio 必须共用
name属性，否则onchange不会按组互斥逻辑工作 - 不要给每个 radio 单独写
onchange内联函数，推荐用事件委托或统一监听父容器 - 如果页面需兼容 IE11，应改用
onclick+ 手动判断checked状态
onchange 的两种写法：内联 vs JS 绑定
内联写法简单直接，适合静态小表单：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
<input type="radio" name="mode" value="ring" onchange="handleModeChange(this)" checked> 响铃<br> <input type="radio" name="mode" value="vib" onchange="handleModeChange(this)"> 振动<br> <input type="radio" name="mode" value="silent" onchange="handleModeChange(this)"> 静音
JS 绑定更可控，推荐用于动态渲染或复杂逻辑：
document.querySelectorAll('input[name="mode"]').forEach(radio => {
radio.addEventListener('change', (e) => {
if (e.target.checked) {
console.log('当前选中:', e.target.value);
// 这里放你的业务逻辑
}
});
});
- 内联方式中，
this指向当前 radio 元素，可直接读this.value和this.checked - JS 绑定时，必须检查
e.target.checked === true，因为切换过程中会先触发未选中项的change（值为false） - 避免在
change回调里修改其他 radio 的checked属性，可能引发循环触发
常见错误：明明点了却没触发 onchange
最常踩的坑不是语法，而是结构或状态干扰：
- 漏写
name属性 → 浏览器不认为它们是一组，无法触发互斥逻辑，onchange仍会触发，但行为不符合预期 - 用
document.getElementById(...).click()模拟点击 → 不会触发onchange，需手动dispatchEvent(new Event('change')) - radio 被设为
disabled→onchange完全不会触发，连onclick也不响应 - 父元素有
pointer-events: none或遮罩层 → 点击事件被拦截，onchange自然不会发生
真正要注意的不是怎么写 onchange，而是确保它运行在「状态真实变更」的上下文中——radio 的互斥性由 name 和浏览器原生逻辑保障，任何绕过这点的手动操作（比如用 JS 强制设 checked）都会让事件流脱节。
