单选按钮组中不存在“未选中的选项”概念,浏览器强制同一name下有且仅有一个被选中;获取未选中元素应使用:not(:checked)或filter(!radio.checked),获取未选中value需先定义全集再排除已选值。

单选按钮组里根本不存在“未选中的选项”这个概念
HTML 的 <input type="radio"> 组由 name 属性绑定,浏览器强制保证同一 name 下**有且仅有一个被选中**(除非全部初始未设 checked,此时确实全未选)。所以“获取未选中的选项”不是 DOM 查询问题,而是逻辑误读:你真正需要的,通常是“获取当前未被选中的那些 radio 元素”,或“判断哪些值没被选中”。
用 document.querySelectorAll 配合 :not(:checked) 选未选中的元素
这是最直接的操作方式,适用于你想对未选中的 radio 节点做样式、禁用、清空等 DOM 级操作:
const radios = document.querySelectorAll('input[name="gender"]:not(:checked)');
注意::not(:checked) 在所有现代浏览器中支持良好,但不兼容 IE;如果需兼容 IE,改用 JS 判断:
const radios = Array.from(document.querySelectorAll('input[name="gender"]'))
.filter(radio => !radio.checked);
- 必须用
Array.from()或扩展运算符转为数组,才能调用filter() -
radio.checked是实时属性,反映当前真实状态,比读getAttribute('checked')可靠得多 - 不要用
querySelectorAll('input[name="gender"][checked=false]')——checked属性和属性值不对应 DOM 状态,这种写法完全无效
想获取“未被选中的 value 值列表”?得先知道全集
DOM 本身不维护 radio 组的“可选值全集”,你需要自己定义或从 HTML 中提取。常见做法:
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记(深入)”;
const allValues = Array.from(document.querySelectorAll('input[name="plan"]'))
.map(radio => radio.value);
然后排除已选中的:
const selectedValue = document.querySelector('input[name="plan"]:checked')?.value;
const unselectedValues = allValues.filter(v => v !== selectedValue);
- 如果一个都没选,
selectedValue是undefined,unselectedValues就等于allValues - 别依赖
radio.getAttribute('value')—— 如果 value 是动态改过的,它可能和实际提交值不一致;始终用radio.value - 服务端通常要求明确知道“用户没选什么”,这时前端应主动把未选值作为显式字段提交(例如
excluded_plan: ["pro", "enterprise"]),而不是靠后端推断
为什么不能用 form.elements 直接遍历?
form.elements["name"] 返回的是单个元素(如果只有一个)或 RadioNodeList(多个同名 radio),但它没有原生过滤方法,且 RadioNodeList 不是真数组:
const form = document.querySelector('form');
const radios = form.elements['color']; // RadioNodeList
// ❌ radios.filter is not a function
// ✅ 必须先转数组:
const unselected = Array.from(radios).filter(r => !r.checked);
-
RadioNodeList的value属性只返回当前选中项的值,未选中时为"",无法反推哪些没选 - 在表单提交前检查未选状态,务必注意:用户可能刚点击但事件还没触发,用
change或input事件监听比轮询更可靠
真正容易被忽略的点是:单选组的“未选中”不是状态,而是缺省;你要的往往不是 DOM 节点本身,而是业务语义上的“排除项”。这意味着必须在代码里显式建模全集,而不是指望浏览器提供“未选中列表”API。


















