求助：基于HTML单选按钮的静态测验得分统计逻辑实现

我来帮你搞定这个测验得分统计的需求！其实思路很简单：咱们只需要监听表单的提交事件，然后遍历所有被用户选中的单选按钮，逐个判断它们的value是不是'right'，每遇到一个正确选项就把得分加1，最后把结果展示出来就行。

第一步：完善你的HTML结构 #

首先要确保每个题目的单选按钮属于同一个分组（也就是name属性一致，这样同一题只能选一个选项），然后把所有题目放在一个<form>标签里，方便监听提交事件。这里给你一个完整的示例模块（你可以复制9份来用）：

<form id="quizForm">
  <!-- 题目1 -->
  <div class='col-sm-12 col-md-6 col-lg-4 text-center'>
    <p class='question'>题目1：以下哪个是正确选项？</p>
    <div class="options">
      <input type="radio" name="q1" value="wrong"> 选项A
      <input type="radio" name="q1" value="right"> 选项B（正确）
      <input type="radio" name="q1" value="wrong"> 选项C
    </div>
  </div>

  <!-- 题目2（复制这个模块到9个） -->
  <div class='col-sm-12 col-md-6 col-lg-4 text-center'>
    <p class='question'>题目2：这是第二题？</p>
    <div class="options">
      <input type="radio" name="q2" value="right"> 选项A（正确）
      <input type="radio" name="q2" value="wrong"> 选项B
      <input type="radio" name="q2" value="wrong"> 选项C
    </div>
  </div>

  <!-- 提交按钮和得分显示区域 -->
  <div class="text-center mt-4">
    <button type="submit">提交答案</button>
    <p id="scoreResult" class="mt-2"></p>
  </div>
</form>

第二步：添加JavaScript逻辑 #

接下来写提交事件的处理代码，放在<script>标签里（可以放在HTML底部或者用DOMContentLoaded确保DOM加载完成）：

document.getElementById('quizForm').addEventListener('submit', function(e) {
  // 阻止表单默认的提交跳转行为
  e.preventDefault();
  
  // 初始化得分
  let score = 0;
  
  // 获取所有被选中的单选按钮
  const selectedOptions = document.querySelectorAll('input[type="radio"]:checked');
  
  // 遍历每个选中的选项，判断是否正确
  selectedOptions.forEach(option => {
    if (option.value === 'right') {
      score++;
    }
  });
  
  // 显示最终得分
  document.getElementById('scoreResult').textContent = `你的得分是：${score}/9`;
});

几个需要注意的小细节 #

• 每个题目的单选按钮name属性必须唯一（比如q1、q2...q9），这样同一题只能选一个选项，避免用户多选同一题的情况。
• 如果用户有题目没选，那这个题不会被统计，得分会自动跳过未答题，符合常规测验逻辑。
• 代码里的scoreResult是用来显示得分的元素，你可以根据自己的页面样式调整它的位置和样式。

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