如何在JSP中实现测验类多选题复选框的校验功能

你已经掌握getParameterValues()方法获取用户选中值，接下来按下面的逻辑实现校验即可：

核心校验逻辑 #

• 先定义当前题目的正确答案集合，本题的正确选项value为directive（指令）、declarative（声明）、expression（表达式）
• 注意：如果用户未勾选任何选项，getParameterValues("ansq3")会返回null，必须做空判断否则会出现空指针异常，未勾选直接判定为答错
• 多选默认判定规则为全中才算正确，少选、错选、多选都为错误，对应两层校验：
  1. 用户选中的所有值，全部都要包含在正确答案集合中（排除错选情况）
  2. 用户选中的数量和正确答案的数量完全相等（排除漏选情况）

后端Java代码示例（Servlet/JSP场景） #

import java.util.Arrays;
import java.util.HashSet;
import java.util.Set;

// 1. 定义正确答案集合
Set<String> correctAns = new HashSet<>(Arrays.asList("directive", "declarative", "expression"));
// 2. 获取用户提交的选中值
String[] userSelected = request.getParameterValues("ansq3");
boolean isRight = false;

if (userSelected != null) {
    Set<String> userAns = new HashSet<>(Arrays.asList(userSelected));
    // 3. 执行校验
    isRight = userAns.containsAll(correctAns) && userAns.size() == correctAns.size();
}

// 输出判定结果
if (isRight) {
    out.print("回答正确");
} else {
    out.print("回答错误");
}

可选：前端实时校验JS示例 #

如果需要在用户提交表单前做实时校验，可直接用JS实现：

function checkQ3Answer() {
    const correctSet = new Set(["directive", "declarative", "expression"]);
    const selectedNodes = document.querySelectorAll('input[name="ansq3"]:checked');
    const userAnsSet = new Set(Array.from(selectedNodes).map(item => item.value));
    return userAnsSet.size === correctSet.size && [...userAnsSet].every(val => correctSet.has(val));
}

补充说明：你给出的示例代码中第二个复选框的label存在笔误，value为directive对应的label应该是“directive”，不是和第一个选项重复的“documentation”。

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