必须用for属性关联唯一id，不能仅靠嵌套；input[type="radio"]需设唯一id，label的for值须严格匹配（大小写、连字符均不可错），同组name属性必须相同以确保互斥。
label 怎么绑定单选按钮才能点文字也选中
必须用 for 属性关联 id，不能只靠嵌套。很多新手把 input 塞进 label 里就以为万事大吉，但若单选按钮是动态渲染或被 JS 移动过位置，嵌套结构容易断裂，for+id 更稳定。
实操建议：
-
input[type="radio"]必须带id，且每个选项的id唯一（如score-1、score-2） -
label的for值必须严格等于对应input的id，大小写和连字符都不能错 - 同一组评分单选按钮，
name属性必须相同（如都为name="rating"），否则无法互斥
如何让点击 label 后视觉反馈更清晰
原生单选按钮默认样式丑且难定制，直接改 input 几乎无效，得靠 label 承担样式和状态响应。关键在利用 :checked 伪类联动 label。
常见错误：只给 input:checked 加样式，但用户看不到——因为 input 被隐藏了。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用
input{ position: absolute; opacity: 0; }隐藏原生控件 - 给
label设计评分图标（如星星、数字、色块），再用input:checked + label或input:checked ~ label触发高亮 - 若用相邻兄弟选择器（
+），确保input在label前面写；若用通用兄弟（~），顺序可灵活，但性能略低
JavaScript 如何安全读取当前选中的评分值
别用 click 事件监听每个 label，容易重复触发或漏事件。应该监听单选组的 change 事件，且绑定在父容器上更稳妥。
实操建议：
- 用
document.querySelector('input[name="rating"]:checked')获取当前选中项，返回null表示未选 - 不要依赖
event.target是label——用户点的是label，但真正触发change的是input - 若需实时响应，监听
change即可；若还要兼容键盘操作（空格键选中），change仍是最可靠事件 - 值提取直接读
element.value，比如<input value="5">就拿到字符串"5"
移动端点击区域太小导致误操作怎么办
默认 label 文字区域窄，手指点不准，尤其在 iOS Safari 上常失焦或触发两次。这不是 bug，是触摸目标尺寸不达标。
实操建议：
- 给
label设min-height: 44px（iOS 推荐最小触控尺寸），配合display: flex; align-items: center;垂直居中 - 避免给
label设padding太小，至少padding: 12px 16px，留出呼吸感 - 禁用
-webkit-tap-highlight-color: transparent消除点击灰斑，提升反馈一致性 - 如果用图标代替文字，确保 SVG 或字体图标有足够包围盒（
width/height不为 0）
name 一致性与 id/for 的精确匹配——差一个字符，点击 label 就完全没反应，还不好排查。另外，别在 label 上加 cursor: pointer 就以为交互完成了，得真点得动、看得清、读得准。 
