HTML+JavaScript星级评分系统顺序异常问题求助

你的星级评分系统出现反向填充问题，核心原因是CSS选择器方向错误，加上JavaScript逻辑违反了单选框（radio）的特性，以下是具体修正步骤：

1. 移除错误的JavaScript逻辑 #

同name属性的单选框只能有一个被选中，你写的fillStars函数尝试将多个单选框设为checked = true，浏览器只会保留最后一个被设置的单选框状态，这直接导致了反向选中的问题。直接移除所有onclick="fillStars(n)"事件，并删除fillStars函数即可。

2. 修正HTML结构与CSS布局 #

由于CSS没有前序兄弟选择器（无法直接选中当前元素左边的兄弟），我们可以通过调整单选框顺序，配合flex反向布局实现从左到右的填充效果：

修改后的HTML #

<div class="form-name">
  <fieldset class="rating">
    <legend>Bewertung:</legend>
    <!-- 单选框从5到1反向排列 -->
    <input type="radio" id="star5" name="rating" value="5" />
    <label for="star5" title="5 Sterne"></label>
    <input type="radio" id="star4" name="rating" value="4" />
    <label for="star4" title="4 Sterne"></label>
    <input type="radio" id="star3" name="rating" value="3" />
    <label for="star3" title="3 Sterne"></label>
    <input type="radio" id="star2" name="rating" value="2" />
    <label for="star2" title="2 Sterne"></label>
    <input type="radio" id="star1" name="rating" value="1" />
    <label for="star1" title="1 Stern"></label>
  </fieldset>
</div>

修改后的CSS #

.rating {
  display: flex;
  flex-direction: row-reverse; /* 反向排列，视觉上仍保持1-5从左到右 */
  justify-content: center;
  align-items: center;
}

.rating input[type="radio"] {
  display: none;
}

.rating label {
  font-size: 60px;
  margin-left: 10px; /* 因布局反向，将margin-right改为margin-left */
  cursor: pointer;
}

.rating label::before {
  content: "\2606";
  display: inline-block;
  width: 1.1em;
  text-align: center;
}

/* 单选框选中时，当前标签及后续标签（视觉上的左侧星）变为实心 */
.rating input[type="radio"]:checked ~ label::before {
  content: "\2605";
  color: gold;
}

/* 鼠标悬停预览效果（可选，提升交互体验） */
.rating label:hover::before,
.rating label:hover ~ label::before {
  content: "\2605";
  color: gold;
}

效果说明 #

• HTML中单选框从5到1排列，配合flex-direction: row-reverse，视觉上依然显示1星到5星从左到右的顺序。
• 选中某颗星时，input:checked ~ label会选中它之后的所有标签（即视觉上左侧的所有星），实现从左到右的填充逻辑。
• 新增的悬停效果让用户点击前就能预览评分状态，优化交互体验。

内容的提问来源于stack exchange，提问作者Kristijan Pehar