Spring MVC下如何遍历表格获取选中复选框的file_id值

原代码问题分析 #

1. HTML端问题：所有复选框复用了同一个id="selectedFile"，HTML中id属性必须唯一，导致getElementById只能获取第一个复选框；同时复选框value属性多了多余的单引号，会导致收集到的ID格式错误。
2. JavaScript端问题：循环逻辑混乱，嵌套循环无意义，且始终只操作第一个复选框，无法遍历所有选中项；每次调用函数未清空数组，会导致重复添加旧数据。

修正后的代码 #

1. HTML表格代码（修正部分）

<table id="downloadTable" class="downloadTable"
    style="width: 100%; border: 1px solid black; column-width: 20px;">
    <tr style="text-align: center">
        <th style="width: 5%">id</th>
        <th style="width: 5%">User ID</th>
        <th style="width: 5%">File ID</th>
        <th style="width: 10%">File Data</th>
        <th style="width: 10%">File Name</th>
        <th style="width: 10%">Select</th>
        <th style="width: 10%">File Type</th>
    </tr>

    <c:forEach items="${listfiles}" var="e">
        <tr style="text-align: left;">
            <td style="text-align: center">${e.id}</td>
            <td style="text-align: center">${e.user_id}</td>
            <td style="text-align: center">${e.file_id}</td>
            <td style="text-align: center">
                <button
                    onClick="window.location='/SpringWithMyBatis/startDownload?file_id=${e.file_id}'">
                    Download</button>
            </td>
            <td style="text-align: center">${e.file_name}</td>
            <!-- 移除重复id，修正value单引号问题 -->
            <td style="text-align: center"><input type="checkbox"
                class="selectedFile" name="selectedFile"
                value="${e.file_id}"></td>
            <td style="text-align: center">${e.file_type}</td>
        </tr>
    </c:forEach>
</table>

2. JavaScript代码（修正+发送逻辑）

<script>
    function selectMultipleFilesToDL() {
        // 每次调用清空数组，避免重复数据
        var multipleFiles = [];
        // 获取所有class为selectedFile的复选框
        var checkboxes = document.querySelectorAll('.selectedFile');
        
        // 遍历复选框，收集选中的file_id
        checkboxes.forEach(function(cb) {
            if (cb.checked) {
                console.log("选中的file_id: " + cb.value);
                multipleFiles.push(cb.value);
            }
        });

        console.log("数组大小: " + multipleFiles.length);
        console.log("数组内容: " + multipleFiles);

        // 发送到Spring MVC控制器
        fetch('/SpringWithMyBatis/batchDownload', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(multipleFiles),
        })
        .then(response => response.text())
        .then(data => {
            console.log("后端响应: " + data);
            // 可添加成功后的处理逻辑，比如提示下载启动
        })
        .catch(error => {
            console.error("请求错误: ", error);
        });
    }
</script>

Spring MVC控制器接收示例 #

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;

@RestController
public class FileDownloadController {

    @PostMapping("/SpringWithMyBatis/batchDownload")
    public String batchDownload(@RequestBody List<String> fileIds) {
        // 处理批量下载逻辑，比如根据fileIds获取文件并打包
        System.out.println("收到的文件ID列表: " + fileIds);
        return "批量下载已启动";
    }
}

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