用 document.queryselector 检查指定 value 是否被选中，应写为 document.queryselector('input[name="theme"][value="dark"]:checked') !== null；需同时限定 name 和 value 防跨组误匹配，动态值用模板字符串，禁用 getattribute('checked') 等错误方式。
用 document.querySelector 检查指定 value 是否被选中
要确认某组单选按钮中「特定 value」是否被选中，最直接的方式是用 document.querySelector 配合属性选择器 + :checked 伪类。比如 name="theme" 的组里想确认 "dark" 是否已选：
const isDarkSelected = document.querySelector('input[name="theme"][value="dark"]:checked') !== null;
这个写法不依赖循环或遍历，性能好、语义清晰。注意返回的是元素或 null，别直接取 .value——万一没选中就报错。
- 必须同时限定
name和value，否则可能跨组误匹配 - 如果 value 是动态变量，记得用模板字符串拼接：
`input[name="${groupName}"][value="${targetValue}"]:checked` - 不要用
getElementsByName然后遍历判断——它返回 NodeList，且无法直接链式加:checked
校验失败时常见错误：把 checked 当成 HTML 属性来读
很多人写 radio.getAttribute('checked') 或 radio.checked === 'true'，这是错的。checked 是 DOM 属性（boolean），不是 HTML 属性字符串。浏览器渲染后，即使你写 checked="false"，radio.checked 仍是 true。
- 正确判断方式只有两种：
element.checked === true或!!element.checked -
getAttribute('checked')返回的是字符串（如""或"checked"），但只反映初始 HTML 状态，JS 运行时修改后就不一致了 - 尤其在表单重置或动态设置后，仅靠
getAttribute会漏判
批量校验多个指定 value 是否互斥选中
有些场景需要确保「A 和 B 不能同时选中」「C 必须和 D 一起选」——这时不能只查单个，得一次性获取整组状态再比对。推荐用 document.querySelectorAll 提前捞出所有同名 radio：
const radios = document.querySelectorAll('input[name="payment_method"]');
然后遍历判断逻辑，比如「只允许选 PayPal 或 Stripe，不能选 Bank Transfer」：
const selected = Array.from(radios).find(r => r.checked)?.value;<br>if (selected === 'bank_transfer') { /* 拒绝提交 */ }
- 用
Array.from()转成数组才能用find，NodeList 本身没这些方法 - 别用
radios.forEach后直接return——它不会中断循环，要用find或some - 如果组里没有选中项，
find返回undefined，所以后面接?.value更安全
注意 name 相同但不在同一 form 里的干扰
DOM 全局查找时，input[name="xxx"] 会匹配整个页面，包括隐藏区域、重复渲染的组件、甚至 iframe 里的内容（跨域除外）。如果你的单选按钮分散在不同 tab 或步骤中，可能误检。
- 加父容器限定范围，比如：
form#step2 input[name="q2"]:checked - Vue/React 项目中，优先用 ref 或 state 控制，避免直接操作 DOM 查找
- 服务端渲染时若存在同名但不同作用域的 radio（如两个独立子表单），务必加 class 或 data-* 区分
实际校验逻辑往往卡在「以为找到了元素，其实选中的是另一组同名 radio」——name 冲突比想象中更常见，尤其是拼接模板或复用组件时。动手前先用浏览器控制台跑一遍 document.querySelectorAll('input[name="xxx"]')，数清楚到底有几个，比盲目写条件更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
