必须为每个radio单独设置唯一id，label的for值须与对应id逐字符一致；嵌套写法更可靠但限制布局，动态生成时需确保id稳定且无重复。
必须给每个 <input type="radio"> 单独配 id，且每个 <label> 的 for 值严格等于对应 id —— 少一个、错一位、多空格，点击文字就失效。
radio 每个选项都要独立 id + for，不能共用
一组 radio 共享 name 是为了互斥，但 for 关联只认 id。如果两个 radio 都写 id="gender"，那么 <label for="gender">男</label> 只会绑定到第一个元素，第二个永远点不动。
- 正确做法：每个选项用唯一
id，比如gender-m、gender-f、gender-o - 错误写法：
<label>性别<input type="radio" name="gender">男<input type="radio" name="gender">女</label>→ 只有第一个 input 能响应 - 别指望靠位置相邻或 class 名自动关联 —— 浏览器根本不看这些
for 值和 id 必须逐字符一致，大小写/下划线/连字符全算数
浏览器对 for 和 id 的匹配是纯字符串比对，不校验是否存在，也不做大小写转换。看起来一样，但复制粘贴时可能混入不可见字符或空格。
-
for="agree"必须配id="agree"；id="Agree"、id="agree "（末尾空格）、id="agree_1"全部无效 - 动态生成时（如 React/Vue 的
v-for或map），确保id字符串拼接逻辑稳定，避免重复或非法字符 - 用 DevTools 右键 label → “Edit as HTML”，复制
for值，再在控制台执行document.getElementById("xxx")，看是否返回目标元素
嵌套写法更可靠，但仅适用于单控件且无布局自由度
把 radio 直接写进 <label> 里，天然建立绑定，绕过所有 id 匹配风险。但它只激活第一个后代控件，且无法分离 label 文字与 input 的视觉位置。
立即学习“前端免费学习笔记（深入）”；
- 可用：
<label><input type="radio" name="theme" value="dark">深色模式</label> - 不可用：想让文字在左、按钮在右，中间插个图标或间距 div → 嵌套结构被破坏，关联断裂
- 注意：
display: none会断开嵌套关联，改用visibility: hidden或opacity: 0保留语义链
移动端和框架中容易静默失败的隐藏条件
即使 for/id 完全正确，某些环境仍不触发选中 —— 这不是 bug，是规范行为或渲染时机问题。
- React/Vue 中，若 input 是受控组件但
value或checked没同步更新，视觉上“卡住”不响应 - Vue 的
v-for缺少:key或 key 不唯一 → hydration 后 DOM 节点错位，for指向旧节点 - CSS 设置了
pointer-events: none在 label 或任意祖先上 → 表面可见，实际点不中 - iOS Safari 对非原生 focusable 元素更苛刻，检查
<meta name="viewport">是否含user-scalable=no
最常被忽略的是：for/id 断联时页面毫无报错，开发者以为“写了就有效”，结果键盘用户 Tab 不进去、读屏器读不出选项含义、手指点文字没反应 —— 这些问题不会在控制台报错，只能靠手动验证 DOM 结构和属性一致性。
