Node.js点击复选框删数据时获取{checkbox:id}而非仅id的问题

我在EJS模板中循环渲染数据条目，每条数据对应一个表单和复选框，设置复选框的onChange事件提交表单到/delete路由，期望通过item._id删除数据库中的对应条目。但在Node.js后端的/delete路由中，发现req.body输出为{checkbox: id}的键值对，且req.body.checkbox与req.body的输出结果完全一致，无法正确提取id值执行删除操作。

EJS模板代码：

<% items.forEach(function(item) { %>
  <form method="POST" action="/delete">
    <tr class="fw-normal">
      <th class="align-middle">
        <span><%= item.title %></span>
      </th>
      <td class="align-middle">
        <span><%= item.description %></span>
      </td>
      <td class="align-middle">
        <span><%= item.urgency %></span>
      </td>
      <td class="align-center">
        <div class="item">
          <input type="checkbox" name="checkbox" value="<%= item._id%>" onChange="this.form.submit()">
          <span data-hidden="true" style="display: none;"><%= item.title %></span>
        </div>
      </td>
    </tr>
  </form>
<% }); %>

后端/delete路由代码：

app.post("/delete", function(req, res){
  const requestedItem = req.body.checkbox;
  console.log(requestedItem);
  TicketDetails.findByIdAndRemove(requestedItem).then(() => {
        console.log("Succesfully deleted checked item from the database");
        res.redirect("/main");
    }).catch((err) => {console.log(err);
    })
    res.redirect("/main");
});

1. 修复Express表单解析中间件配置 #

确保你的Express应用在路由之前正确配置了express.urlencoded中间件，这是解析表单数据的核心：

// 必须放在所有路由定义之前
app.use(express.urlencoded({ extended: true }));

如果extended设为false，解析后的表单数据可能出现异常嵌套，导致req.body.checkbox与req.body表现一致。设置为true可确保正确解析复杂表单结构。

2. 移除路由中的重复重定向 #

你的路由代码中存在两次res.redirect("/main")，这会触发Cannot set headers after they are sent to the client错误，同时干扰异步删除操作的执行。保留回调内的重定向即可：

app.post("/delete", function(req, res){
  const requestedItem = req.body.checkbox;
  console.log(requestedItem);
  
  TicketDetails.findByIdAndRemove(requestedItem)
    .then(() => {
      console.log("Successfully deleted checked item from the database");
      res.redirect("/main");
    })
    .catch((err) => {
      console.log(err);
      res.redirect("/main"); // 出错后仍重定向，避免页面挂起
    });
});

3. 增加复选框值存在性判断 #

复选框只有在被勾选时才会提交值，取消勾选时req.body.checkbox会是undefined，此时执行删除会报错。可以在后端增加判断逻辑：

app.post("/delete", function(req, res){
  const requestedItem = req.body.checkbox;
  
  if (requestedItem) {
    TicketDetails.findByIdAndRemove(requestedItem)
      .then(() => console.log("Successfully deleted checked item from the database"))
      .catch(err => console.log(err));
  }
  
  res.redirect("/main");
});

4. 优化HTML表单结构（语义化修复） #

当前表单包裹<tr>标签不符合HTML规范，可能导致浏览器解析表单数据异常。将表单移至<td>内部：

<% items.forEach(function(item) { %>
  <tr class="fw-normal">
    <th class="align-middle">
      <span><%= item.title %></span>
    </th>
    <td class="align-middle">
      <span><%= item.description %></span>
    </td>
    <td class="align-middle">
      <span><%= item.urgency %></span>
    </td>
    <td class="align-center">
      <form method="POST" action="/delete">
        <div class="item">
          <input type="checkbox" name="checkbox" value="<%= item._id%>" onChange="this.form.submit()">
          <span data-hidden="true" style="display: none;"><%= item.title %></span>
        </div>
      </form>
    </td>
  </tr>
<% }); %>

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