label标签必须包裹input或通过for属性关联id，否则点击文字无效；name属性需完全一致才能互斥；失效常见原因包括for与id不匹配、input被display:none隐藏、动态渲染未同步id。
label 标签必须包裹 input 或关联 for 属性
HTML 单选按钮（<input type="radio">）默认只响应点击小圆圈区域，点击文字不触发。根本解法是用 <label> 正确绑定 —— 要么把 <input> 套进 <label> 里，要么用 for 属性指向 id。
常见错误是只写 <label>选项文字</label> 却没关联任何 input，或者 for 值和 id 拼错（比如大小写、多空格、漏下划线）。
- 推荐方式：直接包裹，语义清晰、不易出错：
<label><input type="radio" name="size" value="m"> 中号</label>
- 分离写法需严格配对：
<input id="size-l" type="radio" name="size" value="l">+<label for="size-l">大号</label> - 所有同名
name的radio才算一组，必须保证name完全一致（包括大小写），否则无法互斥
为什么用了 label 还不生效？检查这三点
即使写了 <label>，点击仍无效，大概率卡在这几个细节上：
-
input不在label内部，且for属性缺失或值不匹配 —— 打开开发者工具，确认label[for]和对应input[id]字符串完全相等 -
input被 CSS 设置了display: none或visibility: hidden，而没用position: absolute; left: -9999px等可访问性友好的隐藏方式（纯display: none会让label失效） - JavaScript 动态插入的 radio 没补全
id，或插入后没同步更新label[for]，导致 DOM 中无有效绑定
移动端点击区域太小？加 padding 不要动 width/height
单纯靠 label 绑定解决了“能不能点”，但手机上手指点不准仍是痛点。别给 input 加 width/height（会扭曲原生样式），而是扩大 label 的可点击范围：
立即学习“前端免费学习笔记（深入）”；
- 给
label加padding: 8px 12px，视觉上更易触达 - 确保
label是块级或 inline-block（避免因父容器line-height导致点击偏移） - 避免在
label内部套其他交互元素（如<button>），会拦截点击事件
React/Vue 里怎么写才不出问题？
框架中容易因 JSX 或模板语法忽略原生规则。关键不是“怎么渲染”，而是“最终输出的 HTML 是否合规”：
- React 中不要用
onClick手动控制checked来模拟 —— 这绕过了原生label机制，丧失无障碍支持 - Vue 中若用
v-for渲染，务必为每个input生成唯一id，并同步到:for（注意是:for绑定，不是字面for） - 服务端渲染（SSR）时，确保
id在首屏就存在，不要等 hydration 后才挂载id，否则首屏 label 无效
user[size][0]）没做 HTML ID 合法性转义，导致 for 匹配失败。真遇到点不动，先查控制台 Elements 面板里那两个属性值是不是一模一样。 
