本文教你使用原生 html 表单与 javascript 实现一个带选项验证、答题必选检查和自动评分功能的在线小测验，无需框架即可快速上手。

构建一个功能完整的前端测验系统，关键在于三步：正确组织表单结构、可靠检测用户是否作答、高效比对答案并统计得分。下面我们将从零开始搭建一个 5 题单选测验，并确保每道题都必须选择后才能提交。

✅ 正确的 HTML 表单结构

首先，每个题目应使用同一 name 的 radio 按钮组（如 name="q1"），确保每组仅能选一项；同时为表单指定 name 属性（如 name="quizForm"），便于 JavaScript 通过 document.forms 精准获取：

<form name="quizForm" onsubmit="submitAnswers(); return false">
  <h3>1. 哪种语言是静态类型、编译型语言？</h3>
  <input type="radio" name="q1" value="a"> a. JavaScript<br>
  <input type="radio" name="q1" value="b"> b. TypeScript<br>
  <input type="radio" name="q1" value="c"> c. Python<br>
  <input type="radio" name="q1" value="d"> d. PHP<br>

  <h3>2. HTML 中定义文档类型的标签是？</h3>
  <input type="radio" name="q2" value="a"> a. <doctype><br>
  <input type="radio" name="q2" value="b"> b. <type><br>
  <input type="radio" name="q2" value="c"> c. <htmltype><br>
  <input type="radio" name="q2" value="d"> d. <!DOCTYPE html><br>

  <!-- 更多题目... -->
  <input type="submit" value="提交答卷" class="submit-btn">
</form>

⚠️ 注意：避免使用 id="radiogroup1" 这类无语义 ID；推荐为每个选项添加有意义的 id（如 id="q1b"）以支持无障碍访问（）。

✅ 检测用户是否作答：安全可靠的判断方式

不要依赖 eval()（已过时且存在安全风险）。现代写法应使用 document.querySelector 或遍历 radio 组：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

function getSelectedValue(name) {
  const radios = document.querySelectorAll(`input[name="${name}"]:checked`);
  return radios.length > 0 ? radios[0].value : null;
}

function submitAnswers() {
  const total = 5;
  let score = 0;
  const answers = ["b", "d", "c", "a", "b"]; // 各题标准答案

  // 检查每道题是否作答
  for (let i = 1; i <= total; i++) {
    const selected = getSelectedValue(`q${i}`);
    if (!selected) {
      alert(`⚠️ 第 ${i} 题未作答，请选择一个选项！`);
      return false; // 阻止提交
    }
  }

  // 核对答案并计分
  for (let i = 1; i <= total; i++) {
    const selected = getSelectedValue(`q${i}`);
    if (selected === answers[i - 1]) score++;
  }

  // 显示结果（可进一步优化为 DOM 插入而非 alert）
  alert(`? 恭喜！您答对了 ${score} 题，总分 ${total} 题，正确率 ${(score / total * 100).toFixed(0)}%`);
  return false;
}

✅ 进阶建议（提升体验与健壮性）

• 禁用重复提交：在 submitAnswers() 开头添加 document.querySelector('.submit-btn').disabled = true;，防止多次点击。
• 视觉反馈：为已选中的选项添加 CSS 类（如 .selected），配合 :checked + label 实现高亮。
• 结果页优化：用
  替代 alert()，动态渲染详细得分、错题解析等。
• 可访问性增强：为每个 radio 添加 ，并用 for 关联 id，提升屏幕阅读器兼容性。

这套方案轻量、兼容性强（支持所有现代浏览器），完全基于原生 Web API，适合教学、原型开发或嵌入式小工具。掌握它，你就能快速构建任意数量的单选/多选自测系统。

立即学习“Java免费学习笔记（深入）”；