应使用 change 事件监听单选按钮组变化，需同 name 属性才能互斥生效；推荐事件委托监听父容器，用 queryselector('input[name="xxx"]:checked') 安全读值，注意 null 判断；dom 与 js 数据需统一数据源并双向同步；ios safari 建议用 input 事件或微任务延迟读值。
单选按钮组怎么监听点击变化
原生 click 事件在单选按钮（<input type="radio">）上不可靠——比如用户重复点击已选中的选项，click 会触发但值没变。真正该用的是 change 事件，它只在选中状态实际改变时触发。
注意：必须给同组 radio 设置相同的 name 属性，否则浏览器不认为它们是一组，change 也不会互斥生效。
实操建议：
- 监听父容器的事件委托更稳妥（尤其动态增删选项时），用
event.target.matches('input[type="radio"]')过滤 - 避免直接监听每个
input元素，防止内存泄漏或重复绑定 - 如果用框架（如 Vue/React），别手动绑事件，优先走响应式数据流
如何安全读取当前选中的值
document.querySelector('input[name="xxx"]:checked') 是最直接的方式，但它可能返回 null（比如初始无默认选项）。不能直接链式调用 .value，否则报 Cannot read property 'value' of null。
常见错误场景：表单重置后、AJAX 加载新选项但未同步选中状态、用户清空了所有 radio 的 checked 属性。
推荐写法：
const selected = document.querySelector('input[name="theme"]:checked');
const value = selected ? selected.value : '';
如果需要监听并同步到某个变量或状态，建议封装成函数，每次 change 触发时调用它更新。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
radio 组与 JavaScript 数据不同步的典型表现
页面渲染后 JS 修改了 input.checked = true，但没触发 change 事件，导致监听逻辑没执行；反过来，JS 改了数据，但没反向设置 DOM 的 checked，UI 就卡在旧状态。
根本原因：DOM 状态和 JS 变量是两套系统，没有自动绑定。
解决思路：
- 始终以 DOM 为单一数据源（简单表单推荐）：读取用
querySelector(...:checked)，设置用input.checked = true+ 手动触发dispatchEvent(new Event('change')) - 或者以 JS 变量为单一数据源（复杂交互推荐）：每次变更都显式同步 DOM，例如
document.querySelectorAll('input[name="mode"]').forEach(el => el.checked = el.value === currentMode) - 不要混合使用两种方式又不维护一致性，这是调试中最耗时间的坑
移动端 Safari 对 radio change 事件的兼容细节
Safari 在某些 iOS 版本（尤其是 iOS 15.4–16.2）中，对 label 包裹 radio 的点击存在延迟触发 change 的问题，表现为点完立刻读 :checked 还是旧值。
这不是 bug，而是 Safari 的异步 focus/selection 处理策略。绕过方法很简单：
- 监听
input事件（iOS Safari 支持良好，且语义上更贴近“值输入完成”） - 或者加个微任务延迟读取：
setTimeout(() => { /* 读值 */ }, 0)或Promise.resolve().then(() => { /* 读值 */ }) - 确保
<label></label>正确关联 radio（用for属性或嵌套写法），否则事件委托失效
这个细节容易被忽略，因为开发时多在桌面 Chrome 测试，上线后用户反馈“点了没反应”，其实只是值读早了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
