修复选中后的单选按钮（Survey Scale CSS）背景颜色，并且所有按钮都没有被选中

let raTing = document.querySELEctorAll('.raTing label');

let nextUntil = (elem,SELEctor,filter) => {
  // Setup siblings array
  let siblings = [];
  // Get the next sibling element
  elem = elem.nextElementSibling;
  // As long as a sibling exists
  while (elem) {
    // If we've reached our match,bail
    if (elem.matches(SELEctor)) break;
    // If filtering by a SELEctor,check if the sibling matches
    if (filter && !elem.matches(filter)) {
      elem = elem.nextElementSibling;
      conTinue;
    }
    // Otherwise,push it to the siblings array
    siblings.push(elem);
    // Get the next sibling element
    elem = elem.nextElementSibling;
  }
  return siblings;
};

// pass the parameters into the function 
let changeBg = (el,eType,target,className) => {
  // loop over the elements 
  el.forEach((val) => {
    // add an event listener to the current element and pass the event object
    val.addEventListener(eType,(E) => {
      // lets reset the targeted parent elements childNodes class name      
      // if it is set to the class name that sets the BG transparency
      // if user clicks to change the setTing they have already set
      for (let i = 0; i < e.target.parentNode.childNodes.length; i++) {
        if (e.target.parentNode.childNodes[i].className === className) {
          e.target.parentNode.childNodes[i].classList.remove(className);          
        }
      }
      // use the event target to target the current element being triggered
      e.target.className = classname;
      // target the last element to stop the Helper function and pass in the e.target
      let next = nextUntil(e.target,'span');
      // iterate over the remaining elements
      for (let i in next) {
        // Use the index on the values for targetTing and apply the class that will style it 
        if (next[i].nodename === target) {
          next[i].className = classname;
        }
      }
    })
  })
}

// call function and pass in the unique parameters
// iteraTing over the raTing elements
// adding a click listener
// targeTing the "LABEL" elements in the nodeList
// adding the class 'rated'
changeBg(raTing,'click','LABEL','rated');

/*main raTing class*/

.raTing {
  position: inherit;
  display: inline-flex;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #000;
  BACkground: linear-gradient( to left,#f00,#ff0,#0f0);
}

.raTing input {
  display: none;
}

.raTing label {
  position: inherit;
  margin: inherit;
  display: flex;
  cursor: pointer;
  width: 100%;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  BACkground: #fff;
  color: #000;
  border-right: 1px solid #000;
}

.rated {
  BACkground: transparent !important;
}

.raTing:not(:checked)>label:hover,.raTing:not(:checked)>label:hover~label {
  BACkground: transparent;
  cursor: pointer;
}

.raTing>input:checked+label:hover,.raTing>label:hover~input:checked~label,.raTing>input:checked~label:hover~label {
  BACkground: transparent;
  cursor: pointer;
}

<div>
  <label for="rdbRaTing1">*1. XYZ </label>

  <!-- 1st Radio button list -->

  <div class="raTing" id="rdbRaTing1">
    <input type="radio" value="7" id="7">
    <label for="7">7</label>
    <input type="radio" value="6" id="6">
    <label for="6">6</label>
    <input type="radio" value="5" id="5">
    <label for="5">5</label>
    <input type="radio" value="4" id="4">
    <label for="4">4</label>
    <input type="radio" value="3" id="3">
    <label for="3">3</label>
    <input type="radio" value="2" id="2">
    <label for="2">2</label>
    <input type="radio" value="1" id="1">
    <label for="1">1</label>
    <input type="radio" value="NA" id="NA">
    <label for="NA">NA</label>
    <span></span>
  </div>
</div>

<div>
  <label for="rdbRaTing2">*2. ABC </label>

  <!-- 2nd Radio button list -->

  <div class="raTing" id="rdbRaTing2">
    <input type="radio" value="7" id="7">
    <label for="7">7</label>
    <input type="radio" value="6" id="6">
    <label for="6">6</label>
    <input type="radio" value="5" id="5">
    <label for="5">5</label>
    <input type="radio" value="4" id="4">
    <label for="4">4</label>
    <input type="radio" value="3" id="3">
    <label for="3">3</label>
    <input type="radio" value="2" id="2">
    <label for="2">2</label>
    <input type="radio" value="1" id="1">
    <label for="1">1</label>
    <input type="radio" value="NA" id="NA">
    <label for="NA">NA</label>
    <span></span>
  </div>
  <div>