label包裹radio是最简可靠的点击穿透方案，直接将input写在label内即可实现点击穿透，无需id/for或JavaScript，语义清晰、无障碍友好、IE9+全支持。
label包裹radio是最简可靠的点击穿透方案
直接把<input type="radio">写在<label></label>内部，就能让整个文本区域响应点击，不需要id和for属性，也不依赖JavaScript。
浏览器会自动将<label></label>内第一个可表单控件（这里是<input>）绑定为控制目标，语义清晰、无障碍友好、兼容性好（IE9+全支持）。
- 同组所有
radio必须共用相同的name值，否则互斥失效 - 不要在一个
<label></label>里塞多个<input>，行为未定义 - 避免用中文当
value，比如value="男"，后端解析易出编码问题 - 如果已有DOM结构无法重写，才考虑
for+id方式，但要确保id全局唯一且拼写一致
name属性拼错是互斥失效的头号原因
浏览器只靠name字符串完全匹配来分组，大小写敏感、空格敏感、引号不敏感——但你写的引号本身不能漏。
常见错误：<input type="radio" name="color" value="red"> 和 <input type="radio" name="Color" value="blue"> 看起来像一组，实际是两组，可以同时选中。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 复制粘贴时容易漏改
name，建议写完立刻用开发者工具 Elements 面板检查所有同名radio是否真在同一个name下 - 动态生成时（如JS模板或框架循环），确保
name是变量而非硬编码字符串拼错 -
name值不要含空格或特殊符号，用theme-mode比theme mode更稳妥
JS读取选中值前必须判null
document.querySelector('input[name="plan"]:checked')在没人选中时返回null，不是undefined，直接链式取.value会抛Cannot read property 'value' of null。
安全写法只有两行：
const selected = document.querySelector('input[name="plan"]:checked');
const planValue = selected ? selected.value : '';
- 别用
getElementsByName配循环，冗余且易漏checked判断 - 别假设用户一定点了，默认没选时
selected就是null - 如果后端要求该字段必填，应在提交前校验
planValue是否为空字符串
样式定制时隐藏原生radio别用opacity:0
移动端 Safari 对opacity: 0隐藏的radio有点击延迟或失效问题，尤其在快速连点时。
推荐用绝对定位裁剪：
input[type="radio"] {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}
- 保留原生控件的可访问性和事件能力，只是视觉不可见
- 用
label::before或label::after模拟圆点，并通过input:checked + label::before切换状态 - 注意
:checked + label是相邻兄弟选择器，所以input必须紧挨着label（嵌套写法天然满足）
name值在不同地方被悄悄改了大小写，或者JS里忘了判null就直接取.value。这两处不盯住，调试半天也看不出问题在哪。 
