优化前端表单提交：正确获取复选框值的实践指南

<!-- 错误的表单结构示例 -->
<form action="/delete" id="listForm" method="POST"></form> <!-- 这是一个空的表单标签 -->
    <div class="item">
        <input type="checkbox" name="checkbox" value="<%= item._id %>" onChange="this.form.submit()">
        <p><%=item.name%></p>
    </div>
</form> <!-- 这里的关闭标签实际上是针对上面那个空表单的 -->

<!-- 正确的表单结构示例 -->
<% listItems.forEach(function(item){%>
    <!-- 每个列表项都有一个独立的表单来处理其删除操作 -->
    <form action="/delete" method="POST">
        <div class="item">
            <!-- 复选框必须在它所属的表单内部 -->
            <input type="checkbox" name="checkbox" value="<%= item._id %>" onChange="this.form.submit()">
            <p><%=item.name%></p>
        </div>
    </form>
<% }); %>

<!-- 在正确的表单结构中使用 onChange -->
<input type="checkbox" name="checkbox" value="<%= item._id %>" onChange="this.form.submit()">

<!-- EJS 模板中的 HTML 部分 -->
<% listItems.forEach(function(item){%>
    <form action="/delete" class="delete-form" method="POST">
        <div class="item">
            <input type="checkbox" name="checkbox" value="<%= item._id %>">
            <p><%=item.name%></p>
        </div>
    </form>
<% }); %>

<!-- 在 <script> 标签中添加 JavaScript 代码 -->
<script>
    // 获取所有名为 'checkbox' 的复选框
    const checkboxes = document.querySelectorAll("input[name='checkbox']");

    checkboxes.forEach(function(checkbox) {
        checkbox.addEventListener("change", function(event) {
            // 检查复选框是否被选中
            if (event.target.checked) {
                // 找到当前复选框所属的最近的 <form> 元素并提交
                event.target.closest('form').submit();
                // 或者如果每个表单都有一个唯一的ID，也可以这样：
                // document.querySelector("form[id='listForm']").submit(); // 但这需要确保ID是唯一的且与当前复选框关联
            }
        });
    });
</script>

// app.js (Node.js/Express)
const express = require('express');
const app = express();

// 配置 Express 来解析 URL-encoded 形式的请求体
// extended: true 允许解析更复杂的嵌套对象
app.use(express.urlencoded({ extended: true }));

app.post("/delete", function(req, res) {
    // req.body.checkbox 将包含被勾选的复选框的 value 属性值
    // 如果有多个同名的复选框被勾选（例如在一个表单中有多个checkbox name="itemIds"），
    // req.body.checkbox 会是一个数组。
    // 在本例中，由于每个复选框独立提交，它会是一个字符串。
    const checkedItemId = req.body.checkbox;
    console.log("收到的复选框值:", checkedItemId);

    // 在这里执行删除逻辑，例如从数据库中删除对应ID的项
    // todo.findByIdAndRemove(checkedItemId).then(...)

    // 删除完成后，通常会重定向回列表页面
    res.redirect("/");
});

// 其他路由和服务器启动代码...
app.get("/", function(req, res) {
    // ... 获取待办事项并渲染列表页面
});

app.listen(3000, function() {
    console.log("Server started on port 3000");
});