label 的 for 属性必须严格匹配 input 的 id，大小写、空格、下划线或拼写任一不同都会导致点击失效；推荐用嵌套方式（label 包裹 input）规避 id 管理问题，同时注意 CSS 截断和移动端 touch 干扰。
label 的 for 属性必须严格匹配 input 的 id
这是最常见失效原因：文字能点击但单选框不响应。根本问题不是 label 写法错，而是 for 值和 id 值不一致——大小写、空格、下划线、拼写任意一处不同都会断开绑定。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保
<input type="radio" id="gender-male">和<label for="gender-male">男</label>中的字符串完全相同（复制粘贴最安全） - 避免用 class 名或 name 值代替 id；
for只认id，不认其他属性 - id 不能重复，同一页面中每个单选框的
id必须唯一，否则 label 可能随机绑定到第一个匹配项
用嵌套方式替代 for/id 更省事
当 label 和 input 在 DOM 中天然相邻或可调整结构时，直接包裹更可靠，完全规避 id 管理问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 写成
<label><input type="radio" name="gender"> 女</label>，点击“女”即触发内部 input - name 属性仍需保持一致（用于单选组互斥），但 id 可省略（除非 JS 或 ARIA 需要）
- 注意：嵌套后 input 不再需要
id，但若同时用 JS 操作该元素，建议仍保留 id，避免 querySelector 混淆
点击区域小？检查 label 是否被 CSS 截断
有时 label 文字能点，但靠近边缘或图标位置点不动——大概率是外层容器设置了 overflow: hidden，或 label 行高/内边距被压缩导致实际可点击区域变小。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查 label 元素的 computed styles，重点关注
height、line-height、padding、overflow - 临时加一句
label { background: rgba(0,0,0,0.1); }，直观看点击范围是否覆盖全部文字 - 避免对 label 设置
display: inline后又强行设宽高；默认 inline 元素的点击热区由内容撑开，改 display 易出意外
移动端点击无响应？可能是 touch 事件拦截或延迟
在 iOS Safari 或某些安卓 WebView 中，label 点击可能延迟 300ms 或完全不触发，尤其当页面启用了 viewport 缩放控制或外层有手势监听时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认
<meta name="viewport" content="width=device-width, initial-scale=1">存在且未禁用缩放（如user-scalable=no） - 避免在 label 或其父级上绑定
touchstart/touchend并调用preventDefault()，这会阻断原生 click 透传 - 极少数情况可加
cursor: pointer到 label，部分旧版 iOS 依赖该声明激活点击态
