我正在为客户编写一个调查页面，他们希望这样，如果有人选择“3”出5个按钮的问题规模，按钮1-3有一个绿色的背景... 4将有1-4等。
目前，如果你点击一个按钮，从数字规模只有一个你点击突出显示绿色。我想要的是，使它改变所有按钮的背景色导致一个点击（如果你点击2，然后它会改变1和2按钮为绿色）。
任何帮助都很感激
此处为调查的主要代码（1个按钮示例-其余部分遵循相同格式）：

<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 id="">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 type="radio" data='Unsatisfied' name='satisfaction' value='20' id='sat-1' /><label for="sat-1"></label>
                                <input type="radio" data='Not Very Satisfied' name='satisfaction' value='40' id='sat-2' /><label for="sat-2"></label>
                                <input type="radio" data='Neutral' name='satisfaction' value='60' id='sat-3' /><label for="sat-3"></label>
                                <input type="radio" data='Satisfied' name='satisfaction' value='80' id='sat-4' /><label for="sat-4"></label>
                                <input type="radio" data='Highly Satisfied' name='satisfaction' value='100' id='sat-5' /><label for="sat-5"></label>
                                <div class="error">
                                    <p>Please select at least one option.</p>
                                </div>
                            </div>
                        </div>
                    

  
                                <button type="button" class="send-btn">Submit</button>
                                <input type="hidden" name="action" value="review" />
                            </form>
                            <div class='success-form'>
                                <h3>Your review was submitted successfully</h3>
                            </div>
                        </div>

一个按钮的CSS：

input[type=radio]:not(.regular-radio) {
    display: none;
}

#wr-1+label,
#application-rating-1+label,
#goals-rating-1+label,
#refer-rating-1+label,
#sat-1+label {
    background: url('/wp-content/themes/theme52950/images/reviews-faces/button-1.png');
    height: 55px;
    width: 109px;
    display: inline-block;
    padding: 0 0 0 0px;
    background-repeat: no-repeat;
}

#wr-1:checked+label,
#application-rating-1:checked+label,
#goals-rating-1:checked+label,
#refer-rating-1:checked+label,
#sat-1:checked+label {
    background: url('/wp-content/themes/theme52950/images/reviews-faces/1-hover.png');
    height: 55px;
    width: 109px;
    display: inline-block;
    padding: 0 0 0 0px;
    background-repeat: no-repeat;
}

JavaScript语言：

<script>

$(document).ready(function() {
    console.log(emailsArray);
    $('input[type=radio]').click(function() {
        avgOne = parseInt($('input[name=satisfaction]:checked').val());
        avgTwo = parseInt($('input[name=working_rating]:checked').val());
        avgThree = parseInt($('input[name=application_rating]:checked').val())
        avgFour = parseInt($('input[name=goals_rating]:checked').val())
        avgFive = parseInt($('input[name=refer_rating]:checked').val())
        avgOfAll = ((avgOne + avgTwo + avgThree + avgFour + avgFive) / 5);

        if (avgOfAll < 80) {
            $('.addtl-comments').show();
        } else {
            $('.addtl-comments').hide();
        }
    })
  

        if (checkOne && checkTwo && checkThree && checkFour && checkFive && addtlComments && checkEmailExist && emailNotDupe) {
            $('.reviews-body form').submit();
            const portalId = '3112753';
            const formId = '23212b77-0a27-4833-93a9-766bdf8c3a9b';
            const url = 'https://api.hsforms.com/submissions/v3/integration/submit/' + portalId + '/' + formId;

            const body = {
                context: {
                    pageUri: window.location.href,
                    pageName: $(document).find("title").text()
                },
                fields: [{
                    name: 'email',
                    value: getUrlParameter('email')
                }, {
                    name: 'how_satisfied_are_you_with_the_overall_experience_in_working_with_',
                    value: document.querySelector('input[name="satisfaction"]:checked').getAttribute('data')
                }, {
                    name: 'how_would_you_rate_working_with_your_recruiter_',
                    value: document.querySelector('input[name="working_rating"]:checked').getAttribute('data')
                }, {
                    name: 'how_would_you_rate_the_application_process_',
                    value: document.querySelector('input[name="application_rating"]:checked').getAttribute('data')
                }, {
                    name: 'how_satisfied_were_you_with_communication_throughout_your_interview_process_',
                    value: document.querySelector('input[name="goals_rating"]:checked').getAttribute('data')
                }, {
                    name: 'how_likely_would_you_be_to_recommend_to_other_candidates_',
                    value: document.querySelector('input[name="refer_rating"]:checked').getAttribute('data')
                }]
            };

任何帮助都感激不尽。