radio单选框不可用display:none隐藏，否则会丧失可访问性与表单功能；应通过隐藏父容器、opacity+absolute定位、disabled属性或框架的v-show/style控制显隐，确保DOM存在且name一致。
radio单选框本身不能用 display: none 隐藏后还保持表单功能
直接给 <input type="radio"> 加 display: none 或 visibility: hidden，会导致它无法被聚焦、无法用空格键选中，且部分浏览器（如 Safari）在提交表单时可能忽略该控件——即使它有 checked 属性。这不是“显示隐藏”的问题，而是语义与可访问性的断裂。
真正可行的思路是：**控制它的父容器或视觉替代层的显隐，同时确保 input 本身始终存在于 DOM 中、可交互**。
- 把
<input>和对应的<label></label>包在同一个<div> 或 <code><span></span>里，对这个外层加display: none - 如果必须隐藏单个 radio 而保留其他，用
opacity: 0; position: absolute; pointer-events: none;替代display: none（保留占位和表单参与） - 禁用场景优先用
disabled属性，而不是隐藏：它既阻止交互，又保证值能随表单提交 - 确保所有同名 radio 始终保留在 DOM 中（哪怕不可见），否则分组失效
- 显隐切换后，手动调用
input.click()或设置input.checked = true，并触发input事件：input.dispatchEvent(new Event('change', { bubbles: true })) - 避免用
innerHTML或outerHTML替换 radio 元素——会丢失事件绑定和当前状态 - React 中若用
key控制 radio，务必保证 key 稳定（例如用id而非索引），否则每次重渲染都会新建 input 实例 - Vue 里若用
v-for渲染 radio 列表，:key必须基于唯一标识（如item.id），不能用index - 框架内操作后，检查 DevTools 中该 radio 是否仍在 DOM 树中、
name是否一致、checked属性是否真实存在（不只是 data 层） - 如果用 CSS 隐藏了 input，而 label 没做任何处理，点击 label 仍会聚焦到已隐藏的 input —— 表现为光标闪一下、无视觉反馈，用户以为没反应
- 更稳妥的做法是：隐藏 input 的同时，给 label 添加
cursor: pointer和点击事件，手动触发对应 input 的click() - 确保
for和id完全匹配（大小写、空格、特殊字符），浏览器对不匹配的for会静默忽略 - 不要在 label 内部再套一层
div或span并加pointer-events: none，这会拦截事件冒泡
用 JavaScript 动态切换 radio 显隐要同步更新 name 和 checked
单纯 show/hide 元素不够。当一组 radio 的可见性动态变化时，浏览器仍按原始 name 分组校验；若隐藏了当前选中的那个，用户再点别的 radio，checked 状态可能丢失，因为被隐藏的项还在 DOM 里参与互斥逻辑。
常见错误现象：console.log(document.querySelector('input[name="gender"]:checked')) 返回 null，尽管代码里明明设置了 input.checked = true。
立即学习“前端免费学习笔记（深入）”；
Vue/React 等框架里别用 v-if / conditional rendering 直接卸载 radio
v-if（Vue）或 {condition && <input type="radio">}（React）会彻底移除 DOM 节点。一旦组件重新渲染，radio 实例重建，checked 状态、焦点、甚至 value 绑定都可能错乱，尤其在表单联动场景下极易丢值。
正确做法是用 v-show（Vue）或 style={{ display: condition ? 'inline' : 'none' }}（React），它们只切样式，不销毁节点。
隐藏 radio 后 label 点击失效？检查 for/id 关联和事件冒泡
很多人为“隐藏 radio 又想点 label 选中”，会写 <label for="r1">男</label><input type="radio" id="r1" name="gender">，然后只隐藏 input。这看似合理，但实际中常出问题：
最简验证方式：打开浏览器开发者工具，在 Elements 面板里右键 radio → “Scroll into view”，看它是否真在页面上（哪怕透明）、是否被包裹在 visible 容器里。看不见不等于不存在，但不存在就一定不能参与表单逻辑。
