Node无法匹配checkbox的name属性，待办清单功能异常求助

核心问题 #

• 任务复选框不在提交表单内：当前添加新任务的表单仅包含title输入框，已有的任务复选框在表单外部，提交时这些复选框的数据不会被发送到后端。
• 后端判断逻辑错误：循环中构造了每个复选框的name（checkbox-i-done），但判断时用的是req.body.checkbox，而非对应name的字段。
• 复选框初始状态未同步：页面渲染时没有根据tasks[i].done设置复选框的checked状态，也没有同步添加对应的name属性。

修复步骤 #

1. 调整表单结构，将任务复选框纳入提交表单 #

修改index.ejs，把任务列表放在添加新任务的表单内部，确保提交时能携带复选框状态：

<form action="/submit" method="post">
  <!-- 新任务输入区域 -->
  <div class="input-group mb-3">
    <input type="text" class="form-control" name="title" id="title" placeholder="Type your new task"
      aria-label="Recipient's username" aria-describedby="button-addon2">
    <button class="btn btn-outline-light" type="submit" id="button-addon2">+</button>
  </div>

  <!-- 任务列表 -->
  <% if(locals.tasks) { %>
    <% for(let i = 0; i < locals.tasks.length; i++){ %>
    <div class="input-group mb-3 <%= tasks[i].done ? 'done' : '' %>">
      <div class="input-group-text">
        <input 
          id="checkbox-<%= i %>" 
          class="form-check-input mt-0 checkbox" 
          type="checkbox" 
          value="true"
          name="checkbox-<%= i %>-done"
          <%= tasks[i].done ? 'checked' : '' %>
          aria-label="Checkbox for following text input">
      </div>
      <input type="text" class="form-control task-text" aria-label="Text input with checkbox"
        value="<%= locals.tasks[i].title %>" readonly>
    </div>
    <% } %>
  <% } %>
</form>

<form action="/reset" method="post" class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-danger btn-reset">Reset List</button>
</form>

• 将任务列表移至提交表单内，确保复选框数据随提交请求发送。
• 初始渲染时根据tasks[i].done设置checked属性和done类，同步状态。
• 直接给复选框设置对应name属性，无需动态操作。

2. 修复后端逻辑，正确匹配复选框name #

修改index.js中的/submit路由处理逻辑：

app.post("/submit", (req, res) => {
    if (tasks && tasks.length > 0) {
        for (let i = 0; i < tasks.length; i++) {
            const checkboxName = `checkbox-${i}-done`;
            // 复选框勾选时才会出现在req.body中，直接判断字段是否存在
            tasks[i].done = !!req.body[checkboxName];
            console.log(`${tasks[i].title} : ${tasks[i].done}`);
        }
    }

    // 新增任务，避免空任务提交
    if (req.body.title?.trim()) {
        class Task {
            constructor() {
                this.title = req.body.title.trim(),
                this.toDo = Date.now(),
                this.done = false
            }
        }
        const newTask = new Task();
        tasks.push(newTask);
    }

    res.render("index.ejs", { tasks });
});

• 用req.body[checkboxName]判断对应复选框是否被提交，修正字段匹配逻辑。
• 添加空任务判断，避免提交无意义的空内容。
• 类名遵循JS规范改为大写开头。

3. 简化jQuery逻辑，仅处理样式切换 #

修改ui.js，去掉冗余的name属性操作，仅保留样式切换：

console.log("jQuery is on.");

$(".checkbox").on("click", function() {
    $(this).closest(".input-group").toggleClass("done");
});

• 利用$(this)简化元素查找，无需通过ID定位。
• 移除动态添加/移除name的逻辑，因为name属性已由后端渲染并随表单提交。

验证要点 #

• 勾选任务复选框后提交新任务，后端控制台应正确输出任务的done状态。
• 页面刷新后，已勾选的任务会保持done样式和勾选状态。

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