单选按钮互斥依赖name属性一致且区分大小写，应监听change事件而非click，动态插入时用事件委托，触发选中需调用click()方法，初始化前须确保dom就绪并读取:checked状态。
单选按钮 name 属性必须一致才能互斥
浏览器只靠 name 属性判断哪些 <input type="radio"> 属于同一组。如果漏写或拼错 name，点击时不会取消其他选项——看起来“联动失效”，其实根本没形成逻辑组。
实操建议：
- 所有同组单选按钮的
name值必须完全相同（区分大小写），例如统一用name="theme" - 避免动态生成时因变量未定义导致
name为空字符串，此时浏览器视作无组别 - 不要依赖
id或class实现互斥，它们对原生行为无影响
用 change 事件监听单选按钮状态变化
click 事件在用户点击已选中的按钮时也会触发，但值没变；而 change 只在真正切换到新选项时触发，更适合做联动响应。
常见错误现象：绑定 click 后，重复点同一个选项反复执行操作，UI 状态错乱。
实操建议：
- 监听
change而非click，例如：document.querySelectorAll('input[name="theme"]').forEach(r => r.addEventListener('change', handleThemeChange)) - 在事件处理器里用
e.target.value获取当前选中值，不要遍历 DOM 查checked - 如果按钮是动态插入的，用事件委托：监听父容器的
change，再判断e.target.matches('input[type="radio"][name="theme"]')
普通按钮触发单选按钮选中需调用 click() 方法
不能直接设 checked = true 就完事——这会更新 DOM 状态，但不触发 change 事件，联动逻辑就断了。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
使用场景：比如“恢复默认”按钮要让某个单选按钮被选中并触发对应样式切换。
实操建议：
- 找到目标单选按钮后，调用其
click()方法（模拟真实用户点击） - 示例：
document.querySelector('input[value="light"][name="theme"]').click() - 避免用
setAttribute('checked', '')，它不触发事件且在现代浏览器中可能被忽略 - 注意：
click()是同步的，事件会在当前 JS 执行栈中立即触发，无需额外等待
联动逻辑里容易忽略表单重置与初始状态一致性
页面加载后，如果单选按钮有 checked 属性，它会成为初始选中项；但如果 JS 在 DOM 加载前就运行，可能读不到这个状态，导致联动按钮显示异常。
性能与兼容性影响：IE 中 change 事件在 radio 上支持良好，但若用 form.reset()，部分老版本 Chrome 不会触发 change，需手动补发。
实操建议：
- 初始化联动按钮状态前，先用
document.querySelector('input[name="theme"]:checked')拿到当前选中项 - 监听
reset事件，在表单重置后手动触发一次对应单选按钮的click() - 避免在
DOMContentLoaded前执行状态读取，确保 DOM 已就绪
checked 就等于用户点了”，结果事件没发、样式没更新、后续逻辑全卡住。记住：浏览器只认真实交互或显式调用 click()。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
