表单提交无法获取EJS渲染的Checkbox值，求勾选提交快捷方法

一、无法获取checkbox值的原因及修复 #

核心问题分析 #

1. HTML结构错误：EJS代码里的<form>标签在渲染checkbox前就提前闭合了，导致checkbox不属于任何表单范围，提交时自然不会携带它的value。
2. 重复ID冲突：listItems.forEach循环中每个表单都用了相同的id="listForm"，document.querySelector只能匹配到第一个表单，后续复选框的提交逻辑完全失效。
3. 重复事件监听：同时使用了inline的onChange="this.form.submit()"和独立脚本的addEventListener，逻辑重复且可能引发冲突。

修复后的EJS代码 #

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

    <div class="box">
        <% listItems.forEach(function(item){%>
        <!-- 移除重复固定ID，将checkbox放入表单内部 -->
        <form action="/delete" class="listForm" method="POST">
            <div class="item">
                <input type="checkbox" name="checkbox" value="<%= item._id %>"
                onChange="this.form.submit()">
                <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>

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

后端补充检查 #

确保Express应用已配置body-parser中间件，否则无法解析POST请求的表单数据：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

// 配置body-parser解析表单数据
app.use(bodyParser.urlencoded({ extended: true }));

// 你的delete路由代码
app.post("/delete",function(req,res){
   console.log(req.body.checkbox); // 现在可正常获取值
   // 可添加数据库删除逻辑，示例：
   // todo.findByIdAndDelete(req.body.checkbox).then(() => res.redirect("/")).catch(err => console.log(err));
})

二、复选框勾选时提交表单的快捷实现方式 #

方式1：Inline事件（最简洁） #

直接在checkbox上添加inline事件，无需额外脚本，适合单表单场景：

<input type="checkbox" name="checkbox" value="xxx" onChange="this.form.submit()">

方式2：事件委托（批量处理更高效） #

如果页面有大量动态生成的复选框，推荐用事件委托，只需绑定一次事件即可处理所有元素：

document.querySelector('.box').addEventListener('change', function(e) {
    if (e.target.type === 'checkbox' && e.target.checked) {
        e.target.form.submit();
    }
});

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