为何用JavaScript为选中的输入框设置样式失效？

提交答案后，需要给选中的正确答案添加绿色边框，错误答案添加红色边框。当每个问题只有2个选项时功能正常，但扩展到4个选项后，部分错误选项（比如最后一个错误选项）选中后不会显示红色样式，控制台无报错。尝试用document.querySelectorAll('input')修改后问题仍未解决。

JavaScript #

let correct = document.getElementsByClassName('correct');
let wrong = document.getElementsByClassName('wrong');
let green = document.getElementsByClassName('green');
let red = document.getElementsByClassName('red');
let btn = document.getElementById('btn');

function checkInputs() {
  let countRightAnswers = 0;

  for (i = 0; i < correct.length; i++) {
    if (correct[i].checked) {
      green[i].style.border = '3px solid green'
      countRightAnswers++
    } else if (wrong[i].checked) {
      red[i].style.border = '3px solid red';
    }

    document.getElementById('right-answers').textContent = countRightAnswers + '/2 correct!';
  }
}

btn.addEventListener("click", checkInputs);

HTML #

<form name="form">
  <fieldset>
    <legend>1. question</legend>
    <label class="green">
          <input type="radio" class="correct" name="question1">correct</label>
    <label class="red">
          <input type="radio" class="wrong" name="question1"> wrong</label>
    <label class="red">
          <input type="radio" class="wrong" name="question1"> wrong</label>
    <label class="red">
          <input type="radio" class="wrong" name="question1"> wrong</label>
  </fieldset>

  <fieldset>
    <legend class="b">2. question</legend>
    <label class="red">
          <input type="radio" class="wrong" name="question2"> wrong</label>
    <label class="red">
          <input type="radio" class="wrong" name="question2"> wrong</label>
    <label class="red">
          <input type="radio" class="wrong" name="question2"> wrong</label>
    <label class="green">
          <input type="radio" class="correct" name="question2"> correct</label>
  </fieldset>
</form>
<button id="btn">Answers</button>
<p id="right-answers"></p>

原代码的循环逻辑完全依赖索引对应，存在致命缺陷：

• correct类元素共2个（每个问题1个正确选项），所以循环仅执行2次
• wrong类元素有6个，循环中wrong[i]只能访问前2个错误选项，后面的错误选项根本不会被遍历到
• green/red标签的索引和correct/wrong的索引也不匹配，导致多数错误选项的样式无法触发

重新设计逻辑，按问题单元（fieldset）遍历，直接定位选中的单选框及其对应标签，彻底摆脱索引依赖。同时每次检查前重置样式，避免残留。

修改后的代码 #

JavaScript #

const btn = document.getElementById('btn');

function checkInputs() {
  let countRightAnswers = 0;
  // 重置所有标签的边框样式
  document.querySelectorAll('.green, .red').forEach(label => {
    label.style.border = '';
  });

  // 遍历每个问题的fieldset
  document.querySelectorAll('fieldset').forEach(fieldset => {
    // 找到当前问题中被选中的单选框
    const selectedRadio = fieldset.querySelector('input[type="radio"]:checked');
    if (!selectedRadio) return; // 未选中则跳过

    // 获取单选框对应的父标签
    const targetLabel = selectedRadio.closest('label');
    if (selectedRadio.classList.contains('correct')) {
      targetLabel.style.border = '3px solid green';
      countRightAnswers++;
    } else if (selectedRadio.classList.contains('wrong')) {
      targetLabel.style.border = '3px solid red';
    }
  });

  // 更新正确答案计数
  document.getElementById('right-answers').textContent = `${countRightAnswers}/2 correct!`;
}

btn.addEventListener("click", checkInputs);

HTML #

（保持原HTML不变即可）

1. 样式重置：每次点击检查前清空所有标签的边框，避免多次操作后样式残留
2. 按问题遍历：以fieldset为单元处理每个问题，适配任意数量的选项
3. 直接关联标签：用closest('label')找到选中单选框的父标签，无需依赖索引对应，逻辑更可靠

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