点击单选按钮文字无反应，90%是label的for值与input的id未严格匹配：二者须逐字完全一致（大小写、连字符均敏感），且每个radio选项需唯一id，name可共享；css如pointer-events:none或dom结构问题也会导致失效。
点击单选按钮的文字没反应，90% 是 label 的 for 值和 input 的 id 没对上——不是浏览器bug，是匹配失败。
radio 必须每个选项单独配 id 和 for
一组 radio 共享 name（比如 name="gender"），但每个选项必须有自己唯一的 id，且每个 label 的 for 必须精确指向它。
- 错误写法：
<label>性别：</label><input type="radio" name="gender" value="m">男<input type="radio" name="gender" value="f">女→ 文字“男”“女”根本不可点 - 正确写法：
<label for="gender-m">男</label><input type="radio" id="gender-m" name="gender" value="m">，再配一个label for="gender-f"和input id="gender-f" - 漏掉任意一个
id，或两个input用了相同id，for就只绑定到第一个，后续选项点击失效
for 和 id 必须逐字完全一致
浏览器不纠错、不忽略大小写、不兼容连字符/下划线差异——它只做字符串严格相等判断。
-
for="userEmail"对应id="user-email"→ 失效（连字符 vs 驼峰） -
for="email"对应id="Email"→ 失效（大小写敏感） -
for="phone"对应name="phone"→ 失效（for只认id，和name无关） - 动态渲染时（如 React/Vue），
id={`radio-${index}`}但index为undefined→ 最终id="radio-"，匹配失败
移动端额外雷区：CSS 可能悄悄禁用点击
即使 for/id 正确，某些 CSS 也会让 label 文字“看起来可点，实际点不动”。
-
label { pointer-events: none; }→ 整个 label 区域失效 -
label { user-select: none; }→ 不影响功能，但常被误以为“点了没反应”（其实是视觉反馈缺失） -
input { display: none; }或visibility: hidden;→ label 仍可触发，但用户看不到状态变化；若同时加了opacity: 0且父容器有overflow: hidden，可能热区塌陷 - label 内部嵌套了
div或其他非流内容元素 → 破坏隐式关联逻辑，显式for又没写对，双重失效
最可靠的验证方式：打开开发者工具，选中 label，看右侧 Elements 面板里 for 值能否点击跳转到对应 input#xxx；再手动点文字，观察焦点是否落到目标 input 上、控制台有没有报错。动态生成的 id，务必在 DOM 渲染完成后检查真实值——别只信模板里的表达式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
