如何将多选题测验的总分展示改为给选中单选按钮加对错CSS类

我来帮你搞定这个需求！你想要点击提交按钮后，给选中的单选按钮添加correct或wrong的CSS类，同时保留总分显示功能对吧？看下面的完整解决方案：

1. 先完善HTML结构（标记正确选项） #

首先需要给每个正确的单选按钮加上data-correct="true"属性，错误选项可以标记data-correct="false"（统一标记更清晰）。你的HTML可以调整成这样：

<section class="quiz">
  <div id="results"></div>
  <form name="quizForm" onsubmit="return submitAnswer()">
    <h4 class="quiz-title knowledge-content-list-item-subheader">Question 1</h4>
    <p>Question content here...</p>
    <div class="quiz-option">
      <input type="radio" name="q1" value="opt1" data-correct="false">
      <label>Option 1 (Wrong)</label>
    </div>
    <div class="quiz-option">
      <input type="radio" name="q1" value="opt2" data-correct="true">
      <label>Option 2 (Correct)</label>
    </div>

    <!-- 更多问题按照这个结构添加，name属性依次设为q2、q3... -->
    <button type="submit">提交答案</button>
  </form>
</section>

2. 修改JavaScript函数（添加类判断逻辑） #

把你的submitAnswer函数替换成下面的代码，它会精准定位用户选中的单选按钮，判断对错并添加对应CSS类，同时计算总分：

function submitAnswer() {
  // 阻止表单默认提交，避免页面刷新
  event.preventDefault();
  
  const quizForm = document.forms['quizForm'];
  let totalScore = 0;
  // 这里列出所有问题的name属性，根据你的实际测验数量修改
  const questionNames = ['q1', 'q2', 'q3'];

  // 遍历每个问题，处理选中选项
  questionNames.forEach(questionName => {
    // 获取当前问题选中的选项值
    const selectedValue = quizForm.elements[questionName].value;
    // 找到对应的单选按钮元素
    const selectedInput = quizForm.querySelector(`input[name="${questionName}"][value="${selectedValue}"]`);
    
    // 判断对错并添加对应类
    if (selectedInput.dataset.correct === 'true') {
      selectedInput.classList.add('correct');
      totalScore++;
    } else {
      selectedInput.classList.add('wrong');
    }
  });

  // 显示最终总分
  document.getElementById('results').textContent = `你的总分：${totalScore}/${questionNames.length}`;
  
  // 确保表单不会提交跳转
  return false;
}

3. 添加CSS样式（可视化对错状态） #

最后添加对应的CSS类，让选中的按钮显示明显的样式区分：

/* 正确选项样式 */
.correct {
  outline: 3px solid #2ecc71;
  background-color: rgba(46, 204, 113, 0.15);
  border-radius: 4px;
}

/* 错误选项样式 */
.wrong {
  outline: 3px solid #e74c3c;
  background-color: rgba(231, 76, 60, 0.15);
  border-radius: 4px;
}

关键说明 #

• 用data-correct属性标记正确选项，JS可以轻松判断对错，逻辑清晰易维护。
• 只针对用户选中的单选按钮添加类，不会影响其他未选中的选项。
• 阻止表单默认提交行为，保证页面不刷新，用户能同时看到样式变化和总分结果。

这样修改后，点击提交按钮就能实现你想要的效果啦！

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