隐藏 radio 按钮应使用 display: none，它保留 name 分组逻辑且不影响互斥；禁用 visibility: hidden 或 hidden 属性；隐藏前需确保默认选中项可见，否则需手动 fallback 并触发 change 事件。
radio 按钮本身怎么隐藏才不影响分组逻辑
直接对 <input type="radio"> 设置 display: none 是最常用也最安全的做法。它移除视觉和布局占位，但保留 DOM 结构和 name 分组关系——这意味着其他未隐藏的 radio 仍能正常互斥，document.querySelector('input[name="xxx"]:checked') 依然有效。
常见错误是用 visibility: hidden 或 opacity: 0：它们让按钮“看不见但点得着”，用户可能误点、Tab 键会聚焦、屏幕阅读器仍可读取，且不改变文档流，容易造成空白干扰。
- ✅ 推荐：
radioEl.style.display = 'none'（隐藏）或radioEl.style.display = ''（恢复） - ❌ 避免：
radioEl.style.visibility = 'hidden'—— 仍参与 tab 导航和点击 - ⚠️ 注意：若用 CSS 类控制，确保该类没被其他规则意外覆盖（比如框架重置了
input[type=radio]的 display）
隐藏后怎么保证默认选中项还在可见范围内
如果初始 checked 的 radio 被隐藏了，浏览器不会自动 fallback 到下一个可见项，而是表现为“无选中”——document.querySelector('input[name="xxx"]:checked') 返回 null，表单提交时该字段值丢失。
所以隐藏前必须检查当前选中状态：
立即学习“前端免费学习笔记（深入）”；
- 先获取当前已选中的 radio：
const checked = document.querySelector('input[name="xxx"]:checked') - 若
checked在将被隐藏的集合里，需手动切换到一个可见的替代项：fallbackRadio.checked = true - 或者更稳妥：隐藏操作完成后，主动触发一次
fallbackRadio.dispatchEvent(new Event('change', { bubbles: true }))，确保监听逻辑同步
用 hidden 属性隐藏 radio 可以吗
不可以。HTML 规范明确禁止对 <input type="radio"> 使用 hidden 属性——即使写了，浏览器也不会渲染它，但它仍会留在 DOM 中，且在某些旧版 Safari 或 SSR 场景下可能引发分组异常或值丢失。
hidden 适用于内容区块（如 <div>、<section>），不适用于表单控件本身。radio 的隐藏必须走 CSS 渲染层，而非语义层。
- ✅ 正确：
radioEl.style.display = 'none' - ❌ 错误：
radioEl.hidden = true或<input type="radio" hidden> - ⚠️ 补充：如果用 JS 动态插入 radio，插入后立刻设
display: none，要等元素挂载完成（比如放在DOMContentLoaded后或使用requestAnimationFrame）再操作，否则样式可能不生效
批量隐藏/显示多个 radio 的实用写法
别手写一堆 getElementById，用 querySelectorAll + name 属性定位更可靠：
const radios = document.querySelectorAll('input[name="planType"]');
// 隐藏 value 为 "trial" 和 "legacy" 的选项
radios.forEach(r => {
if (['trial', 'legacy'].includes(r.value)) {
r.style.display = 'none';
} else {
r.style.display = '';
}
});
注意：不要用 forEach + setAttribute('style', 'display:none')，这会覆盖已有内联样式；优先用 .style.display 直接赋值，清空时设为空字符串 ''，让浏览器回退到 CSS 默认值。
真正容易被忽略的是：隐藏操作后，如果页面有依赖 radio 状态的联动逻辑（比如按钮启用/禁用、表单验证提示），这些逻辑往往没监听 display 变化——你得手动触发一次状态同步，比如调用校验函数或 dispatch change 事件。
