javascript - 如何确定是否在 JavaScript 中勾选了复选框？

Question

我最初在没有数据库的情况下制作待办事项列表，但遇到了问题。每当我勾选一个项目，然后添加另一个项目时，我在前一个项目上的勾选就消失了。

为了解决这个问题，我有一个二维数组来存储列表项和一个布尔值，即是否检查了该值。所以在发布请求（用户想要在表单中添加新项目）中，在向数组添加项目后，我使用查询选择器提取所有复选框并检查它们是否被勾选。如果是，我只是将它们的布尔值更改为真。

在 HTML 代码中，我使用 EJS 来添加 JS if-else 条件。使用这些条件，如果勾选/取消勾选取决于布尔值的复选框。

当我尝试在 Chrome 控制台上调试 Javascript 代码时，它运行良好。但是，当我像普通代码一样通过服务器运行它时，它会为我提供 500 错误。请帮我解决错误。我在下面分别添加 JS 和 HTML 代码。

堆栈跟踪：

ReferenceError: document is not defined
at D:\Work\Code\Projects\WebDev\To-Do-List\app.js:48:21
at Layer.handle [as handle_request] (D:\Work\Code\Projects\WebDev\To-Do-List\node_modules\express\lib\router\layer.js:95:5)
at next (D:\Work\Code\Projects\WebDev\To-Do-List\node_modules\express\lib\router\route.js:137:13)
at Route.dispatch (D:\Work\Code\Projects\WebDev\To-Do-List\node_modules\express\lib\router\route.js:112:3)
at Layer.handle [as handle_request] (D:\Work\Code\Projects\WebDev\To-Do-List\node_modules\express\lib\router\layer.js:95:5)
at D:\Work\Code\Projects\WebDev\To-Do-List\node_modules\express\lib\router\index.js:281:22
at Function.process_params (D:\Work\Code\Projects\WebDev\To-Do-List\node_modules\express\lib\router\index.js:335:12)
at next (D:\Work\Code\Projects\WebDev\To-Do-List\node_modules\express\lib\router\index.js:275:10)
at D:\Work\Code\Projects\WebDev\To-Do-List\node_modules\body-parser\lib\read.js:130:5
at invokeCallback (D:\Work\Code\Projects\WebDev\To-Do-List\node_modules\raw-body\index.js:224:16)

// GLOBAL
var items = new Array;

app.post("/", (req, res) => {
     // request the data sent through post request and append it to the array 

     var temp = new Array(2);
     temp[0] = req.body.listItem;
     temp[1] = false;
     items.push(temp);

     // check if the user has already checked the box
     const checks = document.querySelectorAll("ul input")
     for (var i = 0; i < checks.length; i++) {
         if (checks[i].checked) {
             items[i][1] = true;
         }
     }
     // now redirect to the index page (don't worry about passing the array since it's global)
     res.redirect("/");
 });

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

标签： javascripthtmlexpressejsweb-development-server