最轻量可靠方式是document.querySelector('input[name="xxx"]:checked')?.value，未选中返回null；重置需遍历同name radio设checked=false并removeAttribute('checked')；监听用事件委托或任一按钮change事件；name含特殊字符时用getElementsByName替代querySelector。
如何用 JavaScript 一次性读取所有 name 相同的单选按钮选中值
直接查 document.querySelector('input[name="xxx"]:checked') 是最轻量、最可靠的方式——它天然只返回当前被选中的那个元素，不存在遍历和判断逻辑。如果没选中，结果是 null，别忘了判空。
常见错误是用 document.querySelectorAll('input[name="xxx"]') 拿到 NodeList 后手动循环比对 checked，既冗余又容易漏掉未选中的边界情况。
实操建议：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用
querySelector而非querySelectorAll，除非你明确需要全部单选按钮节点 - 获取值时统一用
?.value链式调用，避免TypeError：document.querySelector('input[name="gender"]:checked')?.value - 如果后端约定未选中时传空字符串而非
null，可加默认值：document.querySelector('input[name="role"]:checked')?.value || ''
批量重置某组单选按钮的选中状态
单选按钮组的“重置”不是清空 value，而是把所有同 name 的 input[type="radio"] 的 checked 设为 false。但要注意：浏览器原生表单重置（form.reset()）会触发所有控件还原，不可控；手动操作更精准。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用
document.querySelectorAll('input[name="xxx"][type="radio"]')获取全部，再逐个设el.checked = false - 不要只设
el.checked = undefined或删checked属性——这在部分老浏览器中不生效 - 若该组有默认选中项（
checked属性写在 HTML 中），仅 JS 设false不足以“视觉还原”，需确保初始 HTML 里没有checked，或重置时同步移除属性：el.removeAttribute('checked')
监听整组单选按钮的变化事件
不能给每个单选按钮单独绑 change，而应在父容器（如 fieldset 或 form）上用事件委托，或直接监听任一按钮——因为同一 name 下，选中一个必然导致另一个取消，所以任一按钮触发 change 都代表整组状态更新。
实操建议：
- 监听任意一个按钮即可：
document.querySelector('input[name="plan"]:first-of-type').addEventListener('change', handler) - 如果按钮是动态插入的，优先用事件委托到父级：
form.addEventListener('change', e => { if (e.target.name === 'status') { /* 处理 */ } }) - 避免在
change回调里重复查询选中值——直接用e.target.value，前提是e.target确实是刚被选中的那个input
注意 name 属性值含特殊字符时的 CSS 选择器写法
当 name 值含方括号（如 user[preference]）、点号、空格等，CSS 选择器会解析失败，querySelector('input[name="user[preference]"]') 报错或不匹配。
实操建议：
- 用
document.getElementsByName('user[preference]')获取 HTMLCollection，再转数组过滤：[...document.getElementsByName('user[preference]')].find(el => el.checked)?.value - 或者对
name做 CSS 转义（不推荐，易错）：input[name="user\[preference\]"]，但需双重反斜杠且兼容性差 - 开发阶段尽量避免在
name中使用非字母数字字符；必须用时，优先走getElementsByName+ 数组方法
实际项目里，最常被忽略的是 name 特殊字符处理和默认 checked 属性残留——这两处出问题时，表现往往是“看起来重置了，但提交时还是旧值”。
