手动设置checked后评分控件选中状态与高亮样式无法保留

应要求，以下是setRating(value, questionId)函数。
发现由于未直接点击输入框导致输入框未被选中后，我编写了此函数强制更新，将输入框设置为选中状态。

function setRating(value, questionId) {
    const identifier = `${questionId}_${value}`
    const radioInput = document.querySelector(`input#rating_${identifier}`)
    radioInput.checked = true
}

我使用SCSS为0-5分评分系统编写了样式，其中红色的"N/A"选项表示未评分。

需求是：若选中3星评分，1星、2星需与3星一同高亮显示。高亮的星星变为金色，N/A选项高亮为红色。

功能层面一切正常，选中的评分数据能正确提交至API，但样式无法保留高亮效果。

具体表现为：将鼠标光标从选中的评分元素移开后，高亮效果消失，该问题下的所有评分元素恢复为灰色。

我感觉遗漏了某些设置，因此附上我的SCSS代码和单个问题的标记代码（页面通常包含多个问题，此信息可能相关）。

在我看来，所有设置都已区分N/A选项与评分星星并能保留高亮，实在无从下手，不知如何修复。

.ratings {
    align-items: center;
    display: flex;
    flex-flow: row-reverse;
    justify-content: center;

    input {
        display: none;

        &.na:checked + label::before {
            content: "N/A";
            color: red;
            font-size: 24px;
            padding: 0 5px;
            transition: 300ms ease all;
        }

        &:checked + label::before {
            color: gold;
        }
    }

    label {
        cursor: pointer;

        &::before {
            content: "\2605";
            color: grey;
            font-size: 24px;
            padding: 0 5px;
            transition: 300ms ease all;
        }

        &:hover::before {
            color: gold;
        }
    }

    input:not(.na):checked + label::before {
        content: "\2605";
        color: gold;
    }

    label.active:not(.na) {
        color: gold;
    }
    label.na.active {
        color: red;
    }
}

<div id="feedbackFormContainer" class="container">
  <section class="mb-3 w-100 section" data-section-id="1">
    <input type="hidden" id="token" name="token" value="eyJCb29raW5nSWQiOjE4NzA2LCJNZW1iZXJJZCI6ODg5MX0=">
    <input type="hidden" id="sectionId" name="sectionId" value="1">
    <div class="card">
      <div class="card-header text-center">
        <p><span id="sectionCounter" class="d-none">1</span>Booking and Pre-Assessment</p>
      </div>
      <div class="card-body w-100">
        <div class="questionContainer border border-secondary rounded">
          <input type="hidden" name="BookingId" id="BookingId" value="18706">
          <div class="questions">

            <div class="question1">
              <div class="d-flex">
                <div class="mt-2 mr-3 flex-fill" style="padding-left:10px;font-size:1em;">Was the booking process easy and convenient?</div>
                <div class="ratings ml-3 border-left" data-questionid="1">

                  <input type="radio" value="5" name="rating1" id="rating_1_5">
                  <label name="label_1_5" id="label_1_5" for="rating1_5" onclick="setRating(5, 1)"></label>

                  <input type="radio" value="4" name="rating1" id="rating_1_4">
                  <label name="label_1_4" id="label_1_4" for="rating1_4" onclick="setRating(4, 1)"></label>

                  <input type="radio" value="3" name="rating1" id="rating_1_3">
                  <label name="label_1_3" id="label_1_3" for="rating1_3" onclick="setRating(3, 1)"></label>

                  <input type="radio" value="2" name="rating1" id="rating_1_2">
                  <label name="label_1_2" id="label_1_2" for="rating1_2" onclick="setRating(2, 1)"></label>

                  <input type="radio" value="1" name="rating1" id="rating_1_1">
                  <label name="label_1_1" id="label_1_1" for="rating1_1" onclick="setRating(1, 1)"></label>

                  <input type="radio" value="0" name="rating1" id="rating_1_0" class="na">
                  <label name="label_1_0" id="label_1_0" class="na active" for="rating1_0" onclick="setRating(0, 1)"></label>

                </div>
              </div>
              <textarea class="comment w-100 form-control" name="comment" id="comment" placeholder="Any comments?" data-questionid="1"></textarea>
            </div>

          </div>
        </div>
        <p>Section 1 of 15.</p>

        <button id="submitBtn" class="btn btn-primary mt-3" onclick="saveFeedback();"><i class="spinner fas fa-circle-notch fa-spin text-white d-none mr-1" aria-hidden="true"></i> Save</button>
      </div>
    </div>
  </section>
</div>

function setRating(value, questionId) {
  const identifier = `${questionId}_${value}`
  const radioInput = document.querySelector(`input#rating_${identifier}`)
  radioInput.checked = true
}

@charset "UTF-8";
.ratings {
  align-items: center;
  display: flex;
  flex-flow: row-reverse;
  justify-content: center;
}

.ratings input.na {
  display: none;
  text-indent: -9999px;
  visibility: hidden;
}

.ratings input.na:checked~label.na::before {
  color: red;
}

.ratings label.na::before {
  content: "N/A";
  color: grey;
  font-size: 24px;
  padding: 0 5px;
  transition: 300ms ease all;
}

.ratings label.na:hover {
  cursor: pointer;
}

.ratings label.na:hover::before {
  color: red;
}

.ratings label.na:hover~label.na::before {
  color: red;
}

.ratings input:not(.na) {
  display: none;
  text-indent: -9999px;
  visibility: hidden;
}

.ratings input:not(.na):checked~label:not(.na)::before {
  color: gold;
}

.ratings label:not(.na)::before {
  content: "★";
  color: grey;
  font-size: 24px;
  padding: 0 5px;
  transition: 300ms ease all;
}

.ratings label:not(.na):hover {
  cursor: pointer;
}

.ratings label:not(.na):hover::before {
  color: gold;
}

.ratings label:not(.na):hover~label:not(.na)::before {
  color: gold;
}

<div id="feedbackFormContainer" class="container">
  <section class="mb-3 w-100 section" data-section-id="1">
    <input type="hidden" id="token" name="token" value="eyJCb29raW5nSWQiOjE4NzA2LCJNZW1iZXJJZCI6ODg5MX0=">
    <input type="hidden" id="sectionId" name="sectionId" value="1">
    <div class="card">
      <div class="card-header text-center">
        <p><span id="sectionCounter" class="d-none">1</span>Booking and Pre-Assessment</p>
      </div>
      <div class="card-body w-100">
        <div class="questionContainer border border-secondary rounded">
          <input type="hidden" name="BookingId" id="BookingId" value="18706">
          <div class="questions">

            <div class="question1">
              <div class="d-flex">
                <div class="mt-2 mr-3 flex-fill" style="padding-left:10px;font-size:1em;">Was the booking process easy and convenient?</div>
                <div class="ratings ml-3 border-left" data-questionid="1">

                  <input type="radio" value="5" name="rating1" id="rating_1_5">
                  <label name="label_1_5" id="label_1_5" for="rating1_5" onclick="setRating(5, 1)"></label>

                  <input type="radio" value="4" name="rating1" id="rating_1_4">
                  <label name="label_1_4" id="label_1_4" for="rating1_4" onclick="setRating(4, 1)"></label>

                  <input type="radio" value="3" name="rating1" id="rating_1_3">
                  <label name="label_1_3" id="label_1_3" for="rating1_3" onclick="setRating(3, 1)"></label>

                  <input type="radio" value="2" name="rating1" id="rating_1_2">
                  <label name="label_1_2" id="label_1_2" for="rating1_2" onclick="setRating(2, 1)"></label>

                  <input type="radio" value="1" name="rating1" id="rating_1_1">
                  <label name="label_1_1" id="label_1_1" for="rating1_1" onclick="setRating(1, 1)"></label>

                  <input type="radio" value="0" name="rating1" id="rating_1_0" class="na">
                  <label name="label_1_0" id="label_1_0" class="na active" for="rating1_0" onclick="setRating(0, 1)"></label>

                </div>
              </div>
              <textarea class="comment w-100 form-control" name="comment" id="comment" placeholder="Any comments?" data-questionid="1"></textarea>
            </div>

          </div>
        </div>
        <p>Section 1 of 15.</p>

        <button id="submitBtn" class="btn btn-primary mt-3" onclick="saveFeedback();"><i class="spinner fas fa-circle-notch fa-spin text-white d-none mr-1" aria-hidden="true"></i> Save</button>
      </div>
    </div>
  </section>
</div>

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