本文教你使用原生 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"）以支持无障碍访问（<label for="q1b">）。
✅ 检测用户是否作答：安全可靠的判断方式
不要依赖 eval()（已过时且存在安全风险）。现代写法应使用 document.querySelector 或遍历 radio 组：
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 实现高亮。
- 结果页优化：用 zuojiankuohaophpcndiv id="result"></div> 替代 alert()，动态渲染详细得分、错题解析等。
- 可访问性增强：为每个 radio 添加 <label>，并用 for 关联 id，提升屏幕阅读器兼容性。
这套方案轻量、兼容性强（支持所有现代浏览器），完全基于原生 Web API，适合教学、原型开发或嵌入式小工具。掌握它，你就能快速构建任意数量的单选/多选自测系统。
立即学习“Java免费学习笔记（深入）”；
