如何用JavaScript判断checkbox是否选中？Express服务端报document未定义错误

问题根因 #

ReferenceError: document is not defined 报错的核心原因是：document 是浏览器端提供的DOM API，只能在用户浏览器的前端JS环境下运行，而你把这段DOM操作代码写在了Express后端服务的路由逻辑里，Node.js运行环境没有内置document对象，必然会抛出未定义错误。你之前在Chrome控制台调试正常，是因为控制台本身就是浏览器环境，和服务端运行环境完全隔离。

另外你原来的逻辑也存在顺序错误：先新增条目再更新原有条目的选中状态，会导致下标错位，就算DOM操作能运行也会出现状态匹配错误。

修复方案 #

你需要调整数据交互逻辑，把前端的勾选状态随新增条目的请求一起提交给服务端，服务端以自己存储的全局items数组作为唯一状态源，不要尝试从前端DOM读取状态。

第一步：修改EJS模板代码 #

给checkbox添加name属性和对应条目的下标值，同时把整个待办列表和新增输入框放在同一个form表单内，确保提交时勾选状态会被一并传给后端：

<form action="/" method="POST">
  <!-- 新增条目输入框 -->
  <input type="text" name="listItem" placeholder="输入新待办">
  <button type="submit">添加</button>

  <ul>
    <% for(var i =0; i < items.length; i++){ %>
      <div class="item">
        <% if(items[i][1]){ %>
          <input type="checkbox" name="checkedItems" value="<%= i %>" checked>
        <% } else{ %>
          <input type="checkbox" name="checkedItems" value="<%= i %>">
        <% } %>
          <p>
            <%= items[i][0] %>
          </p>
      </div>
    <% } %>
  </ul>
</form>

第二步：修改后端POST路由逻辑 #

先根据前端提交的勾选状态更新原有条目的状态，再添加新的待办条目：

// GLOBAL
var items = [];

// 渲染首页的GET路由要记得把items传给模板，示例：
app.get("/", (req, res) => {
  res.render("index", { items: items });
})

app.post("/", (req, res) => {
  // 先更新原有条目的勾选状态
  // 先把所有条目标记为未选中
  items.forEach(item => item[1] = false);
  // 兼容单/多选场景，拿到前端提交的选中的条目下标，无选中则为空数组
  const checkedIndexes = req.body.checkedItems ? 
    (Array.isArray(req.body.checkedItems) ? req.body.checkedItems : [req.body.checkedItems]) 
    : [];
  // 把选中的条目设置为已勾选
  checkedIndexes.forEach(index => {
    const idx = Number(index);
    if(items[idx]) items[idx][1] = true;
  })

  // 新增非空待办条目
  if(req.body.listItem && req.body.listItem.trim()) {
    items.push([req.body.listItem.trim(), false]);
  }

  res.redirect("/");
});

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