Express.js+EJS待办应用：取消复选框时无法接收number参数

核心问题 #

浏览器默认行为是：未勾选的复选框不会被包含在表单提交的参数中。所以取消勾选复选框并提交表单时，后端接收不到number参数，req.body为空，导致访问req.body["number"]时触发TypeError。

解决方案 #

优先推荐以下可靠的修正方式：

方法1：添加隐藏input兜底任务编号

在表单中新增一个与任务索引绑定的隐藏input，确保无论复选框是否勾选，后端都能拿到对应任务的编号：

<form action="/checkClick" method="POST">
  <!-- 隐藏input固定传递任务编号 -->
  <input type="hidden" name="taskId" value="<%=i%>">
  <!-- 复选框仅传递勾选状态，name改为checked -->
  <input type="checkbox" id="checkbox-<%=i%>" 
         <% if(isChecked) {%> checked <% } %> 
         name="checked" 
         onChange="this.form.submit()">
  <label for="checkbox-<%=i%>">
    <% if(isChecked) {%> <s> <% } %>
    <%=ttasks[i].taskName%>
    <% if(isChecked) {%> </s> <% } %>
  </label>
</form>

同时修改后端路由代码，通过隐藏字段获取任务编号，根据复选框参数是否存在判断状态：

app.post("/checkClick", (req, res) => {
  const taskId = req.body.taskId;
  // 复选框被勾选时，req.body.checked会存在；取消勾选则不存在
  const newDoneStatus = req.body.checked !== undefined;
  
  // 增加存在性判断，避免索引越界或undefined报错
  if (todayTasks[taskId] !== undefined) {
    todayTasks[taskId].done = newDoneStatus;
  }
  
  res.render("today.ejs", {
    ttasks: todayTasks
  });
});

额外优化点 #

原EJS代码中value=<%=i%>建议添加双引号，写成value="<%=i%>"，避免当索引值包含特殊字符时出现解析错误。

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