PHP评分功能样式异常：仅首个单选按钮组颜色样式生效

你遇到的问题核心是HTML元素ID重复：循环生成评分组时，所有单选按钮的ID都是rating-5、rating-4等，所有标签的for属性也对应这些重复的ID。而HTML规范要求ID必须全局唯一，这就导致只有第一组的label能正确关联到对应的input，后续组的样式触发逻辑彻底失效。

给每个评分组的单选按钮和标签添加唯一标识后缀（用你的$auditor_count变量即可），确保ID全局唯一，让label能正确绑定到同组的input。

修改后的PHP代码 #

$auditor_count = 1;

$auditors = array($_GET['auditor1'], $_GET['auditor2'], $_GET['auditor3'], $_GET['auditor4']);

foreach($auditors as $auditor) {
   if($auditor == "") continue;
?>
<div class="form-group ms-5 d-flex justify-content-between">
     <p><small><?=$auditor?></small></p>
     <div class="rating rating__<?=$auditor_count?> ms-2">
          <input id="rating-<?=$auditor_count?>-5" class="rating-input" type="radio" name="rating-<?=$auditor_count?>" value="5"/><label for="rating-<?=$auditor_count?>-5"><i class="fa-solid fa-star"></i></label>
          <input id="rating-<?=$auditor_count?>-4" class="rating-input" type="radio" name="rating-<?=$auditor_count?>" value="4"/><label for="rating-<?=$auditor_count?>-4"><i class="fa-solid fa-star"></i></label>
          <input id="rating-<?=$auditor_count?>-3" class="rating-input" type="radio" name="rating-<?=$auditor_count?>" value="3"/><label for="rating-<?=$auditor_count?>-3"><i class="fa-solid fa-star"></i></label>
          <input id="rating-<?=$auditor_count?>-2" class="rating-input" type="radio" name="rating-<?=$auditor_count?>" value="2"/><label for="rating-<?=$auditor_count?>-2"><i class="fa-solid fa-star"></i></label>
          <input id="rating-<?=$auditor_count?>-1" class="rating-input" type="radio" name="rating-<?=$auditor_count?>" value="1" checked/><label for="rating-<?=$auditor_count?>-1"><i class="fa-solid fa-star"></i></label>
        </div>
    </div>
<?php $auditor_count++; } ?>

说明 #

你的现有CSS逻辑完全正常，不需要修改。只要ID关联正确，:hover和:checked的样式规则会自动作用到所有评分组。

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