最直接方法是用 document.querySelectorAll('inputtype="radio":not(:checked)') 精准获取同 name 组内未选中单选框；需注意伪类位置、NodeList 转换、disabled 排除及变量安全拼接。
用 document.querySelectorAll 配合 :not(:checked) 最直接
浏览器原生支持伪类组合，:not(:checked) 能精准筛出未被选中的 <input type="radio"> 元素。注意必须限定在同 name 组内才有意义，否则跨组比较无业务逻辑。
实操建议：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 写法要带
name属性筛选，例如document.querySelectorAll('input[type="radio"][name="gender"]:not(:checked)')，避免把所有 radio 拉出来再过滤 - 不要写成
input:not(:checked)[type="radio"]—— 浏览器对伪类位置敏感，部分旧版 Safari 会失效 - 返回的是
NodeList，不是数组，想用map或filter得先转：[...nodes]或Array.from(nodes)
JavaScript 手动遍历比伪类更可控
当需要兼容 IE11 或逻辑复杂（比如结合 disabled、value 动态判断）时，手动遍历反而更稳。
常见错误现象：只检查 checked === false，却忽略 disabled 状态下的 radio 实际不可交互，但 DOM 属性仍为 false。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用
querySelectorAll('input[type="radio"][name="xxx"]')拿到整组，再逐个判断el.checked === false && !el.disabled - 如果目标是“用户可选但当前未选中”，必须排除
disabled；如果目标是“所有未打钩的 DOM 节点”，那就只看checked - 别用
getElementsByName—— 它返回 HTMLCollection，且不支持链式过滤，容易漏掉动态插入的元素
为什么不能用 querySelector 直接取“未选中”？
querySelector 只返回第一个匹配项，而单选框组里通常只有一个被选中，其余全是未选中 —— 这意味着你大概率拿到的是一个已选中的元素（因为 DOM 顺序靠前），或者根本拿不到（如果第一个恰好是 checked）。
使用场景明确：要“全部”未选中项，就必须用 querySelectorAll；要“任一”未选中项（比如找默认空选项），才考虑 querySelector 加条件，例如：document.querySelector('input[type="radio"][name="mode"][value="auto"]:not(:checked)')。
性能影响：伪类筛选由浏览器引擎优化，比 JS 循环快；但若组内 radio 数量极少（
动态变化时怎么监听未选中状态？
radio 本身没有 change 事件通知“别人被选中了”，所以监听单个 radio 的 change 并不能直接知道“其他变未选中”。真正有效的做法是监听整个表单或父容器的 change，然后重新查一次 :not(:checked)。
容易踩的坑：
- 给每个 radio 单独绑
change，结果重复执行、逻辑错乱 - 用
input事件 —— radio 不触发input，只有change - 忘记移除旧监听器，导致多次绑定，查出来的 NodeList 越来越多
最简方案：form.addEventListener('change', () => { const unselected = document.querySelectorAll('input[type="radio"][name="xxx"]:not(:checked)'); })
真实项目里，name 值常来自变量，拼字符串容易出错，建议用模板字面量加转义，或封装成函数传参处理。
