label直接包裹input是最省事方案，需确保input为label的直接子节点；若中间插入span等元素则热区失效，且必须用CSS（如display:inline-block）撑开点击区域。
label直接包裹是最省事的方案
只要把 input[type="radio"] 作为 label 的**直接子节点**，点击 label 内任意位置（文字、空白、图标）都会触发选中，无需 JS、不用 for 属性、无障碍天然支持。这是浏览器原生行为，不是 CSS 模拟。
常见错误写法：<label><span>选项A</span><input type="radio" name="choice"></label> —— span 隔断了“直接子节点”关系，热区失效。
- 确保
input在label开始标签后、结束标签前，中间不能有其他 HTML 元素 - 允许存在纯文本节点（如空格、换行），但不能有
div、span、svg等容器元素 - React/Vue 中注意插值或条件渲染是否意外插入了注释或空节点，破坏 DOM 结构
用 for + id 关联时，大小写和符号必须完全一致
当单选框和文字不在同一 DOM 位置（比如表格中 input 在末列、文字在首列），只能靠 for 和 id 绑定。但浏览器对匹配极其严格：大小写、连字符、下划线、空格全算在内，for="agree" 和 id="Agree" 就不匹配。
典型失效场景：<label for="sms">短信通知</label><input type="radio" id="SMS" name="notify"> —— SMS ≠ sms，点击无反应。
立即学习“前端免费学习笔记（深入）”；
-
for值里不能带#（for="#sms"是错的） - 避免动态拼接 ID 时出错，比如模板中
for="{{key}}"但实际id是{{key}}_radio - 被关联的
input不能是display: none或visibility: hidden；可用position: absolute; opacity: 0隐藏但保留可聚焦性
label 不撑开尺寸，再对的结构也没用
label 默认是 display: inline，没有宽高，即使结构和属性全对，用户也很难点中——尤其移动端手指操作。必须用 CSS 显式“撑开”它。
安全写法：label { display: inline-block; padding: 8px 12px; min-height: 44px; touch-action: manipulation; }
- 优先用
inline-block，兼顾流式布局和尺寸控制；block会强制换行，慎用 -
padding是最稳妥的热区扩展方式，比单纯设width/height更可靠 - 若用
flex布局，务必加align-items: center，否则vertical-align: baseline或align-items: flex-end会让 radio 被挤出可点击区域
这些 CSS 会让 label 点击在真机上静默失效
iOS Safari 和 Android WebView 对某些 CSS 属性特别敏感，哪怕 HTML 完全正确，也会导致点击无响应。
三个高频雷区：touch-action: none、pointer-events: none、user-select: none（部分 Android WebView 会连带抑制 click 冒泡）。
-
touch-action: none会禁用浏览器默认的点击事件穿透机制，label 无法把点击“嫁接”到内部 radio 上 -
pointer-events: none可能出现在父级容器（比如遮罩层、弹窗 wrapper），检查 computed styles 逐层排查 - 用
-webkit-user-select: none替代全局user-select: none，保留标准属性为text
真机测试前，临时加 outline: 1px solid red 到 label，确认视觉范围和可点击范围是否重合——这是最快定位“热区错位”的方法。
