Node.js+EJS待办清单应用如何将checkbox选中状态保存到MongoDB数据库

解决方案 #

1. 调整MongoDB数据结构 #

给你的待办项Schema新增isCompleted布尔字段，用来存储选中状态，默认值设为false：

const mongoose = require('mongoose');
const todoSchema = new mongoose.Schema({
  // 原有待办内容字段
  content: String,
  // 新增选中状态字段
  isCompleted: {
    type: Boolean,
    default: false
  }
});
const Todo = mongoose.model('Todo', todoSchema);

2. 修改EJS模板绑定状态 #

遍历待办列表时直接传递完整的待办文档对象，给checkbox动态绑定checked属性，同时给checkbox添加自定义属性存储待办项的唯一ID：

<div class="box">
  <% DoList.forEach(function(todo) { %>
    <div class="item">
      <input 
        type="checkbox" 
        class="todo-checkbox" 
        data-id="<%= todo._id %>" 
        <%= todo.isCompleted ? 'checked' : '' %>
      >
      <p class="items" <%= todo.isCompleted ? 'style="text-decoration: line-through;opacity:0.7;"' : '' %>>
        <%= todo.content %>
      </p>
      <form action="/delete" method="post">
        <button class="delete" type="submit" name="delete" value='<%= todo._id %>'>
          <img src="stylee/bin.png" alt="bin cycle">
        </button>
      </form>
    </div>
  <% }) %>
</div>

3. 添加前端状态变更监听 #

监听checkbox的选中事件，触发时向后端发送请求更新对应待办项的状态：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.todo-checkbox').forEach(checkbox => {
    checkbox.addEventListener('change', async function() {
      await fetch('/update-todo-status', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          id: this.dataset.id,
          isCompleted: this.checked
        })
      });
    });
  });
});

4. 后端新增状态更新接口 #

用Express编写对应接口，接收前端传递的待办ID和状态，更新MongoDB中的数据：

// 记得先配置express接收json参数
app.use(express.json());

app.post('/update-todo-status', async (req, res) => {
  try {
    const { id, isCompleted } = req.body;
    await Todo.findByIdAndUpdate(id, { isCompleted });
    res.sendStatus(200);
  } catch (err) {
    console.error(err);
    res.sendStatus(500);
  }
});

补充说明 #

原有新增待办、删除待办的逻辑不需要大改，新增待办时会自动给isCompleted赋值默认值false，删除时直接按ID删除即可。

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