如何在Express/EJS中获取复选框的未选中状态值？

这是HTTP表单的默认行为：未选中的复选框不会被提交到服务器，所以你只能拿到选中的那些。不过有两种简单的方法可以解决这个问题，让你得到完整的复选框状态数组：

方法1：在EJS中添加隐藏输入（推荐） #

我们可以给每个复选框搭配一个同名的隐藏输入，默认值设为false。当复选框未选中时，隐藏输入会被提交；选中时，复选框的true值会覆盖隐藏输入的值（表单提交时，同名字段后提交的会覆盖先提交的）。

同时，要把answer和test的name改成数组形式（answer[]、test[]），这样后端能直接解析成数组；另外注意你代码里的<input type="textarea">是错误写法，正确的多行输入标签是<textarea>！

修改后的EJS代码： #

<form action="/question" method="post">
  <label for="sessionName">Session Name</label>
  <input type="text" name="sessionName">
  
  <div class="question">
    <label for="question">Question: </label>
    <textarea name="question"></textarea>
    
    <ul>
      <li>
        <label>Answer 1: </label>
        <textarea name="answer[]"></textarea>
        <!-- 隐藏输入，默认未选中状态 -->
        <input type="hidden" name="test[]" value="false">
        <input type="checkbox" name="test[]" value="true">
      </li>
      <li>
        <label>Answer 2: </label>
        <textarea name="answer[]"></textarea>
        <input type="hidden" name="test[]" value="false">
        <input type="checkbox" name="test[]" value="true">
      </li>
      <li>
        <label>Answer 3: </label>
        <textarea name="answer[]"></textarea>
        <input type="hidden" name="test[]" value="false">
        <input type="checkbox" name="test[]" value="true">
      </li>
      <li>
        <label>Answer 4: </label>
        <textarea name="answer[]"></textarea>
        <input type="hidden" name="test[]" value="false">
        <input type="checkbox" name="test[]" value="true">
      </li>
    </ul>
  </div>
  
  <input type="submit" value="Create Session">
</form>

后端Express代码调整： #

确保你已经启用了urlencoded中间件（需要extended: true来解析数组）：

const express = require('express');
const router = express.Router();

// 务必在路由前配置这个中间件（通常写在app.js里）
app.use(express.urlencoded({ extended: true }));

router.post('/question', (req, res) => {
  // 现在req.body.answer是所有回答的数组，req.body.test是对应复选框的状态数组（true/false）
  console.log('回答数组:', req.body.answer);
  console.log('复选框状态数组:', req.body.test);
  res.redirect('/');
});

提交后你就能得到预期的结果：

• answer = ["填写的回答1", "填写的回答2", ...]
• test = [true, false, false, true]（对应每个复选框的选中状态）

方法2：后端手动补全未选中状态 #

如果你不想修改前端代码，可以在后端先初始化一个全为false的数组，再根据提交的选中项更新对应位置的状态。这种方法适合固定数量的复选框：

后端代码示例： #

router.post('/question', (req, res) => {
  // 假设固定有4个复选框
  const checkboxCount = 4;
  // 初始化全为false的数组
  let testStatus = new Array(checkboxCount).fill(false);
  
  // 处理提交的选中项：可能是单个值或数组
  const checkedValues = req.body.test;
  if (checkedValues) {
    // 把单个值转成数组统一处理
    const checkedIndices = Array.isArray(checkedValues) ? checkedValues : [checkedValues];
    // 注意：需要把前端复选框的value改成0、1、2、3对应每个选项的索引
    checkedIndices.forEach(index => {
      testStatus[Number(index)] = true;
    });
  }
  
  // 前端要把answer的name改成answer[]才能拿到数组，否则只会拿到最后一个值
  console.log('回答数组:', req.body.answer);
  console.log('复选框状态数组:', testStatus);
  res.redirect('/');
});

这种方法需要你把前端每个复选框的value改成对应的索引（比如第一个是0，第二个是1等），这样后端才能精准定位选中的位置。

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