Spring MVC 接收多組 CheckBox 資料的最佳實踐

場景描述

問卷系統中，每道題可勾選多個選項，後端需知道「題目 ID」與「被勾選的選項 ID」對應關係。前端為動態生成的 CheckBox 群組。

前端命名策略

採用 name="answers[${questionId}]" 陣列命名法，值為選項 ID：

<!-- 第 1 題 -->
<input type="checkbox" name="answers[1]" value="101"> 選項A
<input type="checkbox" name="answers[1]" value="102"> 選項B

<!-- 第 2 題 -->
<input type="checkbox" name="answers[2]" value="201"> 選項C
<input type="checkbox" name="answers[2]" value="202"> 選項D

後端接收方式

方案一：Map<String, String[]>（最簡單）

@PostMapping("/submit")
public String submit(@RequestParam Map<String, String[]> allParams) {
    // allParams key 為 "answers[1]"，value 為被勾選的選項 ID 陣列
    allParams.forEach((key, values) -> {
        if (key.startsWith("answers[")) {
            String qId = key.replaceAll("\\D", ""); // 提取題號
            List<String> options = Arrays.asList(values);
            saveAnswer(qId, options);
        }
    });
    return "success";
}

方案二：自定義物件綁定（結構化）

public class AnswerForm {
    private Map<Long, List<Long>> answers = new HashMap<>();
    // getter/setter
}

@PostMapping("/submit")
public String submit(@ModelAttribute AnswerForm form) {
    form.getAnswers().forEach(this::saveAnswer);
    return "success";
}

需搭配 @InitBinder 註冊自定義 PropertyEditor 或使用 Spring 內建的集合綁定（Spring 3.2+ 自動支援 Map<K, List<V>>）。

資料庫儲存建議

• 正規化：answer_record (id, question_id, option_id)，每筆一行，便於統計。
• JSON 欄位：MySQL 5.7+/PostgreSQL 直接存 {"1": [101,102], "2": [201]}，查詢靈活、節省 Join。

常見坑點

1. 未勾選任何選項 → 瀏覽器不送該 name，後端收到 null 或空 Map，需預設處理。
2. 前端若用 name="answer_1_101" 扁平化命名，後端解析成本高，不推薦。
3. 大量題目時，考慮分頁提交或 AJAX 逐題儲存，避免單次請求過大。