正确处理HTML表单中复选框值提交与服务器端获取的指南

<%- include('header'); -%>
    <div class="box">
        <h1 id="heading"><%= listTitle %></h1>
    </div>

    <div class="box">
        <% listItems.forEach(function(item){%>
        <!-- 每个待办事项及其复选框都应有自己的表单 -->
        <form action="/delete" method="POST">
            <div class="item">
                <input type="checkbox" name="checkbox" value="<%= item._id %>"
                onChange="this.form.submit()"> <!-- 直接在HTML中触发提交 -->
                <p><%=item.name%></p>
            </div>
        </form>
        <% }); %>

        <form action="/" method="POST" class="item">
            <input class="last-child" type="text" name="newItem" placeholder="New Item">
            <button type="submit" name="list" value=<%= listTitle %>>+</button>
        </form>

    </div>

    <!-- 可选：如果需要通过JS监听器提交，而不是onChange属性 -->
    <script>
        // 建议使用事件委托或遍历所有checkbox添加事件监听器
        // 这里以一个简单的例子说明如何通过JS提交
        document.querySelectorAll("input[name='checkbox']").forEach(checkbox => {
            checkbox.addEventListener("change", function(e){
                if (e.target.checked){
                    // 确保e.target.form指向包含当前checkbox的正确表单
                    e.target.form.submit();
                }
            });
        });
    </script>

<%- include('footer') -%>

const express = require("express");
const bodyParser = require("body-parser"); // 如果Express版本低于4.16，可能需要单独引入

const app = express();

// 配置Express使用body-parser来解析URL编码的请求体
// 对于Express 4.16.0+，可以直接使用 express.urlencoded()
app.use(bodyParser.urlencoded({ extended: true }));
// 或者 app.use(express.urlencoded({ extended: true }));

// 假设这里有你的数据库模型和默认数据
// const todo = require("./models/todo"); // 假设你的todo模型在这里
// const todoDefault = [{ name: "Buy groceries" }, { name: "Clean room" }];

// GET 路由（保持不变，与问题无关）
app.get("/", function(req, res){
    // ... 你的 GET 逻辑 ...
    // 示例：
    // todo.find({}).then(function(todos){
    //     if(todos.length === 0){
    //         todo.insertMany(todoDefault).then(() => console.log("Successfully Inserted")).catch(err => console.log(err));
    //         res.redirect("/");
    //     } else {
    //         res.render("list", {listTitle: "Today", listItems: todos});
    //     }
    // }).catch(err => console.log(err));
    res.render("list", { listTitle: "Today", listItems: [{_id: "1", name: "Item 1"}, {_id: "2", name: "Item 2"}] });
});

// POST /delete 路由，用于处理复选框提交
app.post("/delete", function(req, res){
   // req.body.checkbox 将包含被选中复选框的 value 值
   const checkedItemId = req.body.checkbox;
   console.log("接收到的复选框值 (itemId):", checkedItemId);

   // 在这里执行删除操作，例如：
   // todo.findByIdAndRemove(checkedItemId).then(function(){
   //     console.log("成功删除项目:", checkedItemId);
   //     res.redirect("/"); // 删除后重定向回主页
   // }).catch(function(err){
   //     console.log("删除失败:", err);
   //     res.redirect("/");
   // });
   res.redirect("/"); // 示例中直接重定向
});

// 启动服务器
// app.listen(3000, function() {
//     console.log("Server started on port 3000");
// });

// 在 <script> 标签内
document.querySelectorAll("input[name='checkbox']").forEach(checkbox => {
    checkbox.addEventListener("change", function(e){
        if (e.target.checked){
            // e.target 指向触发事件的元素 (即当前的checkbox)
            // e.target.form 指向该checkbox所属的表单
            e.target.form.submit();
        }
    });
});