如何在MongoDB中持久化存储复选框勾选状态

原有代码问题修正 #

首先先处理你现有代码里的两个错误：

1. 写在getAllApplicants函数里的MongoDB连接代码是Node.js服务端代码，不能运行在浏览器环境：浏览器没有require能力，也无法读取服务端的process.env变量，直接写在前端会把数据库连接地址完全暴露，有严重安全风险，这部分代码直接删除即可，前端所有数据库操作必须通过后端接口完成。
2. 原有复选框渲染逻辑不符合规范：所有复选框共用同一个id，没有绑定每条申请的唯一标识，也没有回填数据库中已存储的处理状态，会导致后续无法定位要更新的记录。

步骤1：在server.js中新增状态更新接口 #

在现有POST路由同级位置，新增PUT接口用于接收前端传递的最新状态，更新对应MongoDB记录：

// 记得在server.js顶部引入ObjectId，用于处理MongoDB的主键格式
const { ObjectId } = require('mongodb');

// 新增更新路由
app.put('/api/applicants/:id', async (req, res) => {
  const recordId = req.params.id;
  const { requestComplete } = req.body;
  const collection = client.db("applications").collection("applicants");

  try {
    await collection.updateOne(
      { _id: new ObjectId(recordId) },
      { $set: { requestComplete: requestComplete } }
    );
    res.sendStatus(200);
  } catch (error) {
    console.log('更新状态失败：', error.message);
    res.sendStatus(500);
  }
});

可选优化：在原有POST插入新记录的逻辑里，给requestComplete字段加默认值false，避免老数据无该字段导致回填异常：

const data = { ...req.body, dateOfApplication: new Date(), requestComplete: false };

步骤2：修正前端表格渲染逻辑 #

修改getAllApplicants函数，删除错误的数据库连接代码，给每行绑定申请ID，正确回填复选框状态：

async function getAllApplicants() {
  const response = await fetch('/api/applicants');
  const data = await response.json();
  const tableContent = document.getElementById('table-content');
  // 清空表格旧内容，避免重复渲染
  tableContent.innerHTML = '';

  for (const applicant of data) {
    const row = document.createElement('tr');
    // 将申请记录的唯一ID绑定到行元素上，方便后续获取
    row.dataset.applicantId = applicant._id;
    row.innerHTML = `
      <td>${applicant.fname}</td>
      <td>${applicant.lname}</td>
      <td>${applicant.email}</td>
      <td>${applicant.phone}</td>
      <td>${applicant.campus}</td>
      <td>${applicant.request}</td>
      <td>${applicant.dateOfAttendance}</td>
      <td>
        <input 
          type="checkbox" 
          class="request-complete-checkbox"
          ${applicant.requestComplete ? 'checked' : ''}
        >
      </td>
    `;
    tableContent.appendChild(row);
  }
  // 所有行渲染完成后绑定复选框事件
  bindCheckboxChangeEvent();
}

步骤3：实现前端状态同步逻辑 #

在list-applicants.js中添加事件绑定函数，监听复选框勾选状态变化，向后端发送更新请求：

function bindCheckboxChangeEvent() {
  const checkboxes = document.querySelectorAll('.request-complete-checkbox');
  checkboxes.forEach(checkbox => {
    checkbox.addEventListener('change', async (e) => {
      const currentRow = e.target.closest('tr');
      const applicantId = currentRow.dataset.applicantId;
      const latestStatus = e.target.checked;

      try {
        const updateRes = await fetch(`/api/applicants/${applicantId}`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ requestComplete: latestStatus })
        });

        if (!updateRes.ok) throw new Error('接口请求失败');
        console.log('咨询处理状态已更新');
      } catch (err) {
        console.error('状态保存失败：', err);
        alert('状态保存失败，请重试');
        // 保存失败时回退复选框状态
        e.target.checked = !latestStatus;
      }
    })
  })
}

// 页面加载完成后自动拉取数据渲染表格
window.addEventListener('DOMContentLoaded', getAllApplicants);

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