Spring Boot与Thymeleaf中不确定数量复选框列表的处理方案

前端配置核心要求 #

所有复选框必须设置相同的name属性，比如统一命名为selectedItems，这样表单提交时，选中项的value会自动以数组形式传递给后端。

示例HTML代码：

<form method="post" action="/submit">
  <input type="checkbox" name="selectedItems" value="item001"> 选项A
  <input type="checkbox" name="selectedItems" value="item002"> 选项B
  <input type="checkbox" name="selectedItems" value="item003"> 选项C
  <!-- 可动态添加任意数量的复选框 -->
  <button type="submit">提交选中项</button>
</form>

后端控制器实现方案 #

根据提交方式的不同，有两种常用实现：

1. 表单默认提交（application/x-www-form-urlencoded）

直接通过@RequestParam接收数组或List：

@PostMapping("/submit")
public String handleFormSubmit(
    // 若允许未选中任何项，添加required = false避免请求报错
    @RequestParam(name = "selectedItems", required = false) String[] selectedItems
) {
    // 业务逻辑处理，比如遍历选中项
    if (selectedItems != null) {
        for (String item : selectedItems) {
            System.out.println("已选中：" + item);
        }
    }
    return "success";
}

也可以用List<String>替代数组，写法更灵活：

@PostMapping("/submit")
public String handleFormSubmit(
    @RequestParam(name = "selectedItems", required = false) List<String> selectedItems
) {
    if (selectedItems != null) {
        selectedItems.forEach(item -> System.out.println("已选中：" + item));
    }
    return "success";
}

2. AJAX JSON提交（application/json）

如果前端用AJAX异步提交，需要先收集选中项转为JSON数组，后端用@RequestBody接收：

前端JS示例（原生JS）：

document.querySelector("#submitBtn").addEventListener("click", function() {
    const checkboxes = document.querySelectorAll("input[name='selectedItems']:checked");
    const selectedItems = Array.from(checkboxes).map(cb => cb.value);
    
    fetch("/submit", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(selectedItems)
    }).then(response => {
        console.log("提交成功");
    });
});

后端控制器代码：

@PostMapping("/submit")
public String handleAjaxSubmit(@RequestBody List<String> selectedItems) {
    // 处理选中项逻辑
    selectedItems.forEach(item -> System.out.println("已选中：" + item));
    return "success";
}

关键注意事项 #

• 后端参数名必须和前端复选框的name属性一致，或者通过@RequestParam(name = "xxx")指定对应关系。
• 若用户未选中任何复选框，后端接收的数组/List会是null，建议添加required = false避免400错误。

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