原生 radio 是唯一兼顾表单提交、键盘导航、无障碍和纯 css 交互的方案；div+click 方案无法提交数据、不可聚焦、屏幕阅读器不可读，仅是视觉玩具。

直接用 `` + `` 是唯一能兼顾表单提交、键盘导航、无障碍和纯 CSS 交互的方案。其他“用 div 堆星星再绑 click”的写法，后端收不到数据，屏幕阅读器读不出选项，键盘用户 tab 不进去——不是评分组件，只是个视觉玩具。

为什么不能只用 div 和 click 事件

常见错误是把五颗 ★ 写成独立 div 或 span，然后用 JS 绑定 click 更新 class。问题很实在：

• 表单提交时，div 不会随 form 一起发给后端，name="rating" 彻底丢失
• tab 键无法聚焦到这些 div，键盘用户根本没法操作（除非手动加 tabindex="0" 和全套 keydown 处理）
• 屏幕阅读器默认忽略无语义的 div，必须补全 role="radio"、aria-checked、aria-labelledby 等，工作量不比用原生 radio 少
• 移动端点击区域小，div 缺少原生 focus/active 状态，触摸反馈弱

input[type="radio"] 的正确结构和 DOM 顺序

必须保证 input 在 label 前面（或包裹在 label 内），否则 :checked ~ label 选择器失效。典型结构如下：

<div class="star-rating">
  <input type="radio" id="star5" name="rating" value="5"><label for="star5" title="5 分">★</label>
  <input type="radio" id="star4" name="rating" value="4"><label for="star4" title="4 分">★</label>
  <input type="radio" id="star3" name="rating" value="3"><label for="star3" title="3 分">★</label>
  <input type="radio" id="star2" name="rating" value="2"><label for="star2" title="2 分">★</label>
  <input type="radio" id="star1" name="rating" value="1"><label for="star1" title="1 分">★</label>
</div>

关键点：

• 所有 input 的 name 必须相同，否则互斥失效
• for 属性必须和对应 input 的 id 完全一致（大小写敏感）
• 不要用 display: none 隐藏 input——它会让兄弟选择器断链；改用 position: absolute; opacity: 0; width: 0; height: 0;
• 默认选中某颗星，直接给对应 input 加 checked 属性，不是 defaultChecked

CSS 实现悬停高亮和选中状态的要点

纯 CSS 要实现「悬停第 3 颗星，前 3 颗都变色」+「已选第 4 颗，前 4 颗保持高亮」，得靠两个规则叠加：

• input:checked ~ label：控制已选状态（从当前 input 往后找所有 label）
• .star-rating:hover label:hover ~ label, .star-rating:hover label:hover：控制悬停（注意 hover 时要同时命中自身和后续兄弟）

但有个坑：hover 规则优先级常低于 :checked，所以必须让 :checked ~ label 的选择器权重更高，比如加个类名或用 !important（不推荐），更稳妥的是把悬停样式写在 :checked 规则之后。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

另外，5 星语义上应从右往左排（5 分最右），CSS 中要么用 flex-direction: row-reverse，要么用 direction: rtl + unicode-bidi: bidi-override，避免文字流干扰 ★ 渲染。

JS 只该干 JS 必须干的事

原生 radio 能搞定的，别用 JS 插手。JS 只需处理三件事：

• 初始化：页面加载后，根据后端返回值设置 document.querySelector('[value="3"]').checked = true
• 监听变化：用 change 事件（不是 click），绑定在任意一个 input[name="rating"] 上即可
• 读取值：用 document.querySelector('input[name="rating"]:checked)?.value，注意空值判断（用户没点就提交时）

半星、取消选中、拖动评分——这些都不是表单需求，而是 UI 增强，必须加 JS。但它们不该破坏原生 radio 的基础能力，比如取消功能做完后，仍要确保最终选中的那个 input 是 checked 状态，否则表单照样收不到值。

真正容易被忽略的，是焦点管理。键盘用户按 tab 进入评分区后，焦点落在第一个 input 上，但你隐藏了它——必须用 input:focus + label 给 label 加 outline 或 box-shadow，否则他们完全不知道自己在哪颗星上。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！