解决Web表单中复选框值提交问题的实用教程

<form action="/delete" id = "listForm" method="POST"></form> // 空的form标签，且在循环外
<% listItems.forEach(function(item){%>
    <div class="item">
        <input type="checkbox" name="checkbox" value="<%= item._id %>"
        onChange="this.form.submit()"> // input在div内，而div不在form内
        <p><%=item.name%></p>
    </div>
</form> // 这个闭合标签实际上是多余的，且与前面的空form不匹配
<% }); %>

<%- 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">
                <!-- 复选框位于其所属的form标签内 -->
                <input type="checkbox" name="checkbox" value="<%= item._id %>"
                onChange="this.form.submit()">
                <p><%=item.name%></p>
            </div>
            <!-- 如果需要，可以在这里添加其他隐藏字段，例如用于验证或传递额外数据 -->
            <!-- <input type="hidden" name="itemId" value="<%= item._id %>"> -->
        </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>

    <!-- 这里的JavaScript代码不再需要，因为onChange属性已经处理了提交 -->
    <!-- 如果仍然需要使用JS监听，可以这样写，但要确保选择器能正确匹配到每个复选框 -->
    <!-- <script>
        document.querySelectorAll("input[name='checkbox']").forEach(function(checkbox){
            checkbox.addEventListener("change", function(){
                if (this.checked){
                    this.form.submit(); // 提交当前复选框所在的表单
                }
            });
        });
    </script> -->

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

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose'); // 假设您使用Mongoose连接MongoDB

const app = express();
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public")); // 如果有静态文件，确保配置

// 假设您的Todo模型和默认数据
const todoSchema = new mongoose.Schema({
    name: String
});
const todo = mongoose.model("Todo", todoSchema);

const todoDefault = [
    { name: "Welcome to your todolist!" },
    { name: "Hit the + button to add a new item." },
    { name: "<-- Hit this to delete an item." }
];

// GET / 路由，用于显示待办事项列表
app.get("/", function(req, res){
    todo.find({})
        .then(function(todos){
            if(todos.length === 0){
                return todo.insertMany(todoDefault); // 返回Promise以便链式调用
            } else {
                res.render("list", {listTitle: "Today", listItems: todos});
            }
        })
        .then(function(result){ // 插入成功后重定向
            if (result) { // 检查是否是insertMany的返回
                console.log("Successfully Inserted default todos.");
                res.redirect("/");
            }
        })
        .catch(function(err){
            console.error("Error in GET /:", err);
            res.status(500).send("Server Error"); // 错误处理
        });
});

// POST /delete 路由，用于处理删除操作
app.post("/delete", function(req, res){
   const checkedItemId = req.body.checkbox; // 正确获取复选框的value值

   if (checkedItemId) {
       // 执行删除操作，例如使用Mongoose的findByIdAndRemove
       todo.findByIdAndRemove(checkedItemId)
           .then(function() {
               console.log("Successfully deleted item: " + checkedItemId);
               res.redirect("/"); // 删除成功后重定向回首页
           })
           .catch(function(err) {
               console.error("Error deleting item:", err);
               res.status(500).send("Error deleting item."); // 错误处理
           });
   } else {
       console.log("No checkbox value received for deletion.");
       res.redirect("/"); // 如果没有收到值，也重定向
   }
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, function() {
    console.log(`Server started on port ${PORT}`);
});

// 连接MongoDB (假设您已经设置了MongoDB URI)
mongoose.connect("mongodb://localhost:27017/todolistDB", { useNewUrlParser: true, useUnifiedTopology: true })
    .then(() => console.log("MongoDB Connected..."))
    .catch(err => console.error(err));