本文手把手教你使用原生 html 表单与 javascript 实现一个带选项验证、答题必选校验和自动评分的交互式测验系统，无需框架即可准确判断用户是否选择选项并统计正确率。
构建一个功能完整的在线测验系统，核心在于三步：结构化表单设计 → 检测用户是否作答 → 对照标准答案评分。下面我们将以 5 道单选题为例，提供可直接运行的专业级实现方案。
✅ 正确的 HTML 结构（关键原则）
- 每道题使用唯一 name 属性（如 q1, q2），确保同组单选按钮互斥；
- value 必须设置有意义的标识符（如 "a", "b"），而非通用值（如 "radio"）；
- 表单需指定 name（如 name="quizForm"），以便 JavaScript 通过 document.forms["quizForm"] 安全访问；
- 避免使用已废弃的 align 属性，改用 CSS 控制布局。
<form name="quizForm" onsubmit="submitAnswers(); return false"> <h3>1. 什么是 JavaScript 的原始数据类型？</h3> <label><input type="radio" name="q1" value="a"> A. Object</label><br> <label><input type="radio" name="q1" value="b"> B. String</label><br> <label><input type="radio" name="q1" value="c"> C. Array</label><br> <label><input type="radio" name="q1" value="d"> D. Function</label><br><br> <h3>2. `document.getElementById()` 返回什么？</h3> <label><input type="radio" name="q2" value="a"> A. NodeList</label><br> <label><input type="radio" name="q2" value="b"> B. HTMLCollection</label><br> <label><input type="radio" name="q2" value="c"> C. Element</label><br> <label><input type="radio" name="q2" value="d"> D. String</label><br><br> <!-- 更多题目... --> <input type="submit" value="提交答卷" class="submit-btn"> </form>
? 最佳实践：为 添加 包裹，提升可访问性与点击区域；使用 class 而非内联样式控制外观。
✅ JavaScript 逻辑：精准检测选择 + 严格评分
以下函数完成三项关键任务：
- 必答校验：遍历所有题目，检查 querySelector 是否能获取到被选中的单选按钮；
- 答案比对：将用户所选 value 与预设答案数组逐项比对；
- 结果反馈：弹窗显示得分，并支持后续扩展（如生成详细报告）。
function submitAnswers() {
const total = 5;
let score = 0;
const answers = ["b", "c", "a", "d", "a"]; // 标准答案（按 q1–q5 顺序）
// ✅ 检测每道题是否作答（推荐写法，替代已弃用的 eval）
for (let i = 1; i <= total; i++) {
const selected = document.querySelector(`input[name="q${i}"]:checked`);
if (!selected) {
alert(`⚠️ 第 ${i} 题未作答，请选择一项！`);
return false; // 阻止表单提交
}
}
// ✅ 获取并比对答案
for (let i = 1; i <= total; i++) {
const userAns = document.querySelector(`input[name="q${i}"]:checked`).value;
if (userAns === answers[i - 1]) score++;
}
// ✅ 显示结果（可替换为 DOM 插入或跳转页面）
const resultMsg = `? 恭喜！您答对了 ${score} / ${total} 题。\n正确率：${((score / total) * 100).toFixed(0)}%`;
alert(resultMsg);
return false;
}⚠️ 重要提醒：
- 避免使用 eval()（如原示例中 eval('q'+i)），它存在安全风险且已被现代开发规范弃用；
- 使用 document.querySelector('input[name="q1"]:checked') 是获取当前选中值的最可靠方式，兼容所有主流浏览器；
- return false 在 onsubmit 中可阻止表单默认提交行为，避免页面刷新丢失状态。
✅ 进阶建议（提升用户体验）
- 视觉反馈：为已选选项添加 CSS 高亮（如 input:checked + label { font-weight: bold; color: #2c7be5; }）；
- 防重复提交：提交后禁用按钮 event.target.disabled = true;；
- 结果可视化：用 替代 alert()，动态渲染得分与错题解析；
- 响应式适配：配合媒体查询确保在移动设备上单选框清晰可点。
通过以上结构化实现，你不仅能准确判断用户是否完成选择，还能构建出专业、健壮、可维护的前端测验系统——所有代码均基于标准 Web API，零依赖，开箱即用。
立即学习“Java免费学习笔记（深入）”；
