基于HTML和JavaScript实现简易测验：计算复选框答题得分方法

嘿，作为HTML和JavaScript新手，你这个需求其实挺典型的，我来一步步帮你拆解搞定！核心思路就是遍历页面上的所有复选框，筛选出用户选中的选项，再用已有的should_be_checked函数验证这些选项是否正确，最后统计正确数量作为得分。

第一步：先梳理你的HTML结构（关键前提） #

要让JS能识别每个复选框对应的题目和选项索引，最清晰的方式是用data-*属性来存储这些信息。给你个示例结构参考：

<!-- 第0题的3个选项 -->
<div class="question">
  <p>问题1：以下哪些是前端技术？</p>
  <input type="checkbox" data-question="0" data-choice="0" id="q0c0">
  <label for="q0c0">HTML</label>
  
  <input type="checkbox" data-question="0" data-choice="1" id="q0c1">
  <label for="q0c1">Java</label>
  
  <input type="checkbox" data-question="0" data-choice="2" id="q0c2">
  <label for="q0c2">JavaScript</label>
</div>

<!-- 第1题的选项 -->
<div class="question">
  <p>问题2：以下哪些是循环语句？</p>
  <input type="checkbox" data-question="1" data-choice="0" id="q1c0">
  <label for="q1c0">if</label>
  
  <input type="checkbox" data-question="1" data-choice="1" id="q1c1">
  <label for="q1c1">for</label>
</div>

<!-- 触发得分计算的按钮 -->
<button onclick="solution()">计算我的得分</button>
<p>最终得分：<span id="score-output"></span></p>

第二步：编写核心的solution函数 #

逻辑非常直白，跟着步骤走就行：

1. 初始化得分变量为0；
2. 获取页面上所有复选框元素；
3. 遍历每个复选框，只处理被用户选中的；
4. 从选中的复选框里提取题目索引和选项索引（注意转成数字，因为data属性返回的是字符串）；
5. 调用should_be_checked函数验证，如果返回true就给得分加1；
6. 最后可以把得分返回，或者显示到页面上。

代码示例：

// 假设这个验证函数已经由你定义完成
function should_be_checked(question_index, choice_index) {
  // 示例逻辑：第0题选0和2正确，第1题选1正确
  if (question_index === 0) {
    return choice_index === 0 || choice_index === 2;
  } else if (question_index === 1) {
    return choice_index === 1;
  }
  return false;
}

// 你的得分计算核心函数
function solution() {
  let score = 0;
  // 获取页面上所有复选框
  const allCheckboxes = document.querySelectorAll('input[type="checkbox"]');
  
  // 遍历每个复选框
  allCheckboxes.forEach(checkbox => {
    // 只处理用户选中的选项
    if (checkbox.checked) {
      // 提取并转换索引为数字
      const questionIdx = parseInt(checkbox.dataset.question);
      const choiceIdx = parseInt(checkbox.dataset.choice);
      
      // 调用验证函数，正确则加分
      if (should_be_checked(questionIdx, choiceIdx)) {
        score++;
      }
    }
  });
  
  // 可选：把得分显示到页面上
  document.getElementById('score-output').textContent = score;
  // 返回得分，供其他逻辑使用
  return score;
}

几个小细节提醒 #

• 确保data-question和data-choice的索引和should_be_checked函数里的逻辑对应（比如都是从0开始计数）；
• 如果你的复选框是用name属性区分的（比如name="q0_c0"），也可以通过拆分name字符串获取索引，但用data-*属性会更直观好维护；
• 如果题目数量固定，也可以按题目遍历再找对应复选框，但上面的方法更通用，不管多少题都能处理。

这样写下来，就能轻松算出用户的正确选项数量啦！

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