最可靠的方式是使用 document.querySelector('input[name="xxx"]:checked') 获取被选中的单选按钮元素，它返回完整 DOM 元素并支持访问 value、id、dataset 等全部属性，但需判空；注意 DOM 加载时机、name 一致性、特殊字符转义及 Shadow DOM 场景。
如何用 JavaScript 获取单选按钮组中被选中的 <input type="radio"> 元素
直接查 document.querySelector('input[name="xxx"]:checked') 是最可靠的方式。它返回的是实际的 DOM 元素，而不是值或索引，所以你能拿到 value、id、dataset、attributes 等全部信息。
注意：如果没选中任何项，这个查询会返回 null，必须做空值判断。
- 别用
document.getElementsByName()配合循环 —— 多余且易错 - 别依赖
form.elements.xxx.value—— 它只给字符串值，丢掉其他属性 - 确保所有 radio 的
name属性完全一致（包括大小写和空格）
querySelector 查不到？检查这些常见原因
最常见的不是语法错，而是 DOM 状态或结构问题：
- 页面还没加载完就执行查询 → 放在
DOMContentLoaded或事件回调里 - radio 被动态插入但未 append 到 document → 查询前确认已挂载
- name 值含特殊字符（如点、括号）→ 用属性选择器转义：
input[name="user[gender]"]:checked可直接用，但含空格或引号需写成input[name="user gender"]:checked - 存在多个同名 radio 组（比如重复渲染）→
querySelector只返回第一个匹配项，用querySelectorAll+ 过滤更稳妥
需要同时读取 value 和自定义数据时怎么写
拿到元素后，所有属性都可即取即用。比如你有：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<input type="radio" name="plan" value="pro" id="plan-pro" data-price="299" data-months="12">
对应 JS：
const selected = document.querySelector('input[name="plan"]:checked');
if (selected) {
console.log(selected.value); // "pro"
console.log(selected.id); // "plan-pro"
console.log(selected.dataset.price); // "299"
console.log(selected.dataset.months); // "12"
}
注意：dataset 自动把 data-xxx-yyy 转成驼峰 xxxYyy，大小写敏感；getAttribute('data-price') 更直白，适合不确定命名规则时。
表单提交前校验是否已选，以及默认值处理
浏览器不会阻止无选中项的 radio 表单提交，submit 事件里必须手动拦截：
- 用
!document.querySelector('input[name="x"]:checked')判断是否漏选 - 设置默认选中项推荐用 HTML 的
checked属性（服务端渲染或静态页），而非 JS 赋值 —— 否则可能被用户快速点击绕过 - JS 动态设默认值要调
element.checked = true，不能只改value，否则 DOM 状态不同步 - 如果 radio 组嵌在 Shadow DOM 里，
querySelector需换为shadowRoot.querySelector
真正容易被忽略的是：radio 的「选中状态」是互斥的，但 JS 修改 checked 属性不会自动清除同组其他项 —— 浏览器只在用户点击时才做清理，脚本操作得自己管。
