必须阻止已选中星星的再次点击清空选择，确保“打分即确定”；实操需用label包裹radio与图标、监听change事件、检查e.target.checked为true时记录分数，JS不可省略以获取数值。
点击星星就能打分，但点击后不能反向取消
默认行为下，input[type="radio"] 点击已选中的星星会清空选择，这不符合“打分即确定”的交互预期。必须阻止已选中状态下的再次点击生效。
实操建议：
- 用
label包裹input[type="radio"]和对应星星图标（如★或 SVG），确保点击区域准确 - 给所有
input添加name="rating"保证单选互斥 - 监听
change事件而非click，避免重复触发 - 在事件处理中检查
e.target.checked === true，只在首次选中时记录分数，之后忽略同选项点击
用纯 HTML/CSS 实现，不依赖 JS 也能显示当前分值
如果仅需静态展示（比如评分结果页），可用 :checked 伪类 + ~ 通用兄弟选择器高亮已选及左侧星星，但无法“读出数值”。要真正获取分数，JS 不可省略。
常见错误现象：以为加了 checked 属性就能让页面加载时显示 4 星，结果发现没效果——因为 checked 只对单个 input 生效，需手动为对应项添加该属性，且其他同名 input 必须移除 checked。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 初始化时，用 JS 设置
document.querySelector('input[value="4"]').checked = true比写死 HTML 更可控 - CSS 中用
input[value="5"]:checked ~ label配合label:nth-of-type(-n+5)实现“点亮前 N 颗”效果 - 若需输出数字（如显示“4.0/5”），必须用 JS 读取
document.querySelector('input[name="rating"]:checked')?.value
移动端点击不准、误触多，怎么优化触摸体验
小星星在手机上容易点偏，尤其连续操作时。原生 radio 的点击热区太小，label 是唯一可靠扩大区域的方式，但默认 padding 不足。
实操建议：
- 给每个
label设置display: inline-block和至少padding: 8px，确保热区宽度 ≥ 44px（iOS 最小推荐点击尺寸） - 禁用
user-select: none，防止长按触发文字选择干扰 - 避免在星星组件外层套
div并绑定click，会截断原生 radio 的 focus 行为，影响无障碍访问 - 测试时用真机开启“辅助功能 > 显示点击反馈”，确认每次点击都有明确视觉响应
如何把用户选的分数传给后端或存到 localStorage
很多人卡在“点了星星，但不知道怎么拿值”。关键不是“怎么收集”，而是“什么时候收”——不能等页面卸载，得在用户选完立刻捕获。
实操建议：
- 监听
change事件后，立即将value存入localStorage.setItem('userRating', value) - 若需提交表单，确保
input在form内，且name值有意义（如name="product_rating"），后端才能收到字段 - 注意：
value是字符串，后端接收时需转为整数；前端做计算（如平均分）前也应先parseInt(value, 10) - 不要用
submit按钮触发读取——用户可能不点按钮直接关页，必须在change里完成持久化
input[disabled] 会失效，但对应的 label 默认不会变灰。必须手动加 CSS 规则匹配 input[disabled] + label 或 label:has(input[disabled])（注意后者兼容性有限）。 
