radio元素没有“未被选中”的独立状态属性，只有checked为true时才表示被选中，其余情况均为checked===false；需用querySelectorAll筛选同组radio并过滤出!radio.checked的可用项。
radio元素没有“未被选中”的独立状态属性
HTML标准里，radio按钮天生就是“非选即空”——它只有checked为true时才算被选中，其余所有情况（包括未渲染、被禁用、DOM中存在但没点过）都只是checked === false。所以不存在一个叫“未被选中”的特殊状态需要“获取”，你真正要做的，是找出那些checked === false且仍处于可交互范围内的input[type="radio"]。
用querySelectorAll配合属性选择器筛选未选中的radio
最直接的方式是选中同组所有radio，再过滤掉已选中的：
// 假设name为"gender"
const radios = document.querySelectorAll('input[type="radio"][name="gender"]');
const uncheckedRadios = Array.from(radios).filter(radio => !radio.checked);
注意几点：
-
document.querySelectorAll('input[type="radio"]:not(:checked)')看起来简洁，但:not(:checked)在部分老浏览器（如IE）不支持，且它会匹配所有checked === false的radio，包括disabled或尚未插入DOM的——这未必是你想要的“可用但未选中” - 如果只关心当前表单内、未被禁用的选项，建议加
:enabled：input[type="radio"][name="gender"]:enabled -
Array.from()或扩展运算符[...radios]是必须的，因为NodeList不支持filter()
为什么不能用getElementsByName直接判断？
document.getElementsByName("xxx")返回的是HTMLCollection，它动态响应DOM变化，但遍历时容易出错：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 它不支持数组方法（如
filter），必须先转数组 - 若页面有多个同名
radio但分布在不同form中，它会一并抓取，可能混入你没预期到的节点 - 更隐蔽的问题：
getElementsByName在某些XHTML或严格解析环境下行为不稳定，推荐优先用querySelectorAll
监听变化时别漏掉change事件的触发时机
想实时知道哪个radio“变未选中”了？注意：radio组里，用户切换选项时，旧选项的change事件**不会触发**——只有新选中的那个会触发。所以你无法靠监听单个radio的change来捕获“它被取消选中”这件事。
正确做法是监听整个组的父容器（比如form），或用input事件（兼容性稍差），或在每次操作后统一扫描：
form.addEventListener('change', () => {
const selected = document.querySelector('input[name="mode"]:checked');
const unchecked = [...document.querySelectorAll('input[name="mode"]')].filter(r => r !== selected);
});
这个逻辑看似绕，但它是唯一可靠的方式——因为浏览器根本不提供“某radio失去选中”的原生事件。
真正容易被忽略的是：当一组radio初始就没有checked项时，document.querySelector('input[name="x"]:checked')会返回null，后续链式调用会报错，所有检查都得先做存在性判断。
