如何用JavaScript实现点击评分按钮时高亮对应及之前的所有按钮？

嘿，这个星级评分的高亮需求很常见，我给你一套适配现有代码的简洁方案，分几步就能搞定核心效果——点击某一评分按钮时，自动高亮该按钮及之前的所有按钮：

步骤1：优化HTML结构（添加统一类名） #

先给所有评分单选框和对应的标签添加统一的类名，这样后续CSS和JS更容易选择元素，不用写一堆重复的ID选择器：

<section class="l-reviews pt-30 pb-15">
   <div class="contain">
      <div class="row">
         <div class="col-md-12">
            <div class="reviews-wrapper">
               <div class="reviews-top-header">
                 <p>Thank you for taking part. Please complete this survey to let us know how we’re doing.</p>
                 <p>Please rate the following on a 1-5 scale (1 = Least, 5 = Most)</p>
                 </div>
              <div class="reviews-body">
                <form method='post' name='front_end' action="">
                  <div class="form-control">
                    <p>1. Were the payroll process and benefits options explained to you fully?</p>
                    <div class="input-holder">
                      <input type='hidden' name='title' value='' />
                      <input type='hidden' name='email' value='' />
                      <!-- 给每个input加rating-input类，label加rating-label类 -->
                      <input type="radio" data='Unsatisfied' name='satisfaction' value='20' id='sat-1' class="rating-input" />
                      <label for="sat-1" class="rating-label"></label>
                      <input type="radio" data='Not Very Satisfied' name='satisfaction' value='40' id='sat-2' class="rating-input" />
                      <label for="sat-2" class="rating-label"></label>
                      <input type="radio" data='Neutral' name='satisfaction' value='60' id='sat-3' class="rating-input" />
                      <label for="sat-3" class="rating-label"></label>
                      <input type="radio" data='Satisfied' name='satisfaction' value='80' id='sat-4' class="rating-input" />
                      <label for="sat-4" class="rating-label"></label>
                      <input type="radio" data='Highly Satisfied' name='satisfaction' value='100' id='sat-5' class="rating-input" />
                      <label for="sat-5" class="rating-label"></label>
                    </div>
                 </div>
            
           <button type="button" class="send-btn">Submit</button> 
  
               </form>
              </div>
           </div>
        </div>
     </div>
   </div>
</section>

步骤2：调整CSS样式 #

替换原来零散的ID选择器，用统一的类名来控制样式，同时定义一个active类作为高亮状态：

/* 基础标签样式（未选中状态），如果每个等级初始图标不同，可以单独设置 */
.rating-label {
    background: url('/wp-content/themes/theme52950/images/reviews-faces/1.png');
    height: 55px;
    width: 109px;
    display: inline-block;
    padding: 0;
    background-repeat: no-repeat;
    cursor: pointer; /* 增加鼠标指针提示，提升交互体验 */
}

/* 高亮状态样式 */
.rating-label.active {
    background: url('/wp-content/themes/theme52950/images/reviews-faces/1-hover.png');
}

/* 可选：如果每个等级的高亮图标不同，可以给label加data-hover-img属性，后续用JS动态设置 */

步骤3：编写JavaScript逻辑 #

通过监听单选框的change事件，实现点击时批量设置高亮状态，同时支持页面初始化时的默认选中状态：

$(document).ready(function() {
    // 初始化高亮：如果页面加载时有默认选中的评分，自动高亮对应范围
    initRatingHighlight();

    // 监听评分单选框的选择变化
    $('.rating-input').on('change', function() {
        updateRatingHighlight($(this));
    });

    // 保留你原有的提交按钮逻辑
    $('.send-btn').click(function(e) {
        e.preventDefault();
        let checkOne = false;
        let checkTwo = false;
        let checkThree = false;
        let checkFour = false;
        let checkFive = false;
        // ... 你的其他提交逻辑可以继续在这里编写
    });
});

// 初始化评分高亮函数
function initRatingHighlight() {
    const checkedInput = $('.rating-input:checked');
    if (checkedInput.length > 0) {
        updateRatingHighlight(checkedInput);
    }
}

// 更新评分高亮函数
function updateRatingHighlight(currentInput) {
    // 从ID中提取当前评分的序号（比如sat-3提取出3）
    const currentIndex = parseInt(currentInput.attr('id').split('-')[1]);
    // 先移除所有标签的高亮状态
    $('.rating-label').removeClass('active');
    // 给当前及之前的所有标签添加高亮状态
    for (let i = 1; i <= currentIndex; i++) {
        $(`#sat-${i}`).next('.rating-label').addClass('active');
    }
}

扩展：支持多组评分（可选） #

如果你的调研页面有多个评分问题，只需要给每个评分组加一个容器类（比如rating-group），然后修改JS选择器，避免组之间互相影响：

// 修改updateRatingHighlight函数
function updateRatingHighlight(currentInput) {
    const currentGroup = currentInput.closest('.rating-group');
    const currentIndex = parseInt(currentInput.attr('id').split('-')[1]);
    currentGroup.find('.rating-label').removeClass('active');
    for (let i = 1; i <= currentIndex; i++) {
        currentGroup.find(`#sat-${i}`).next('.rating-label').addClass('active');
    }
}

为什么这个方案是最佳选择？ #

• 低侵入性：几乎不用修改现有HTML结构，只需要添加几个类名，完美适配你现有的代码框架
• 逻辑清晰：通过序号批量控制高亮，代码容易理解和维护
• 兼容性好：支持所有现代浏览器，也兼容旧版jQuery环境
• 扩展性强：可以轻松扩展到多组评分、自定义每个等级的高亮图标等需求

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