Express JS复选框表单仅返回选中值，如何获取全量选项值？

这是个很常见的问题，核心原因是浏览器默认只会提交被勾选的复选框数据，未勾选的复选框不会被包含在表单请求参数里——所以你勾选3个选项时，后端只会收到3个'on'，自然数组长度是3，而不是你期望的5个。

要解决这个问题，有两种常用思路，前端处理或后端补全，根据你的场景选就行：

方案一：前端提交前手动构建完整数组 #

在表单提交时，用JavaScript遍历所有复选框，主动生成包含所有选项状态的数组，再提交给后端。比如：

// 给所有复选框加个统一的类名方便选择
const checkboxes = document.querySelectorAll('.form-option');
// 遍历每个复选框，勾选的填'on'，未勾选的填空格
const fullOptions = Array.from(checkboxes).map(box => box.checked ? 'on' : ' ');

// 把数组转成JSON字符串（或者直接用FormData提交）
const formData = new FormData();
formData.append('fullOptions', JSON.stringify(fullOptions));

// 用fetch或axios发送请求
fetch('/your-submit-url', {
  method: 'POST',
  body: formData
});

对应的EJS模板里，给复选框加类名：

<!-- home.ejs -->
<input type="checkbox" class="form-option"> 选项0
<input type="checkbox" class="form-option"> 选项1
<input type="checkbox" class="form-option"> 选项2
<input type="checkbox" class="form-option"> 选项3
<input type="checkbox" class="form-option"> 选项4

方案二：后端预先初始化数组，结合勾选值补全 #

如果不想改动前端，可以在后端（比如你的router.js）先创建一个包含所有默认值的数组，再根据提交的勾选值更新对应位置。

首先确保前端复选框的name设为options[]，value设为对应的索引（0-4）：

<!-- home.ejs -->
<input type="checkbox" name="options[]" value="0"> 选项0
<input type="checkbox" name="options[]" value="1"> 选项1
<input type="checkbox" name="options[]" value="2"> 选项2
<input type="checkbox" name="options[]" value="3"> 选项3
<input type="checkbox" name="options[]" value="4"> 选项4

然后在router.js里处理：

// 确保已经配置了express.urlencoded({ extended: true })
router.post('/your-form-path', (req, res) => {
  // 初始化一个5元素的默认数组，用空格填充
  const result = [' ', ' ', ' ', ' ', ' '];
  // 拿到提交的勾选索引（如果没有勾选，req.body.options会是undefined，所以加个默认空数组）
  const checkedIndexes = req.body.options || [];

  // 遍历勾选的索引，把对应位置改成'on'
  checkedIndexes.forEach(index => {
    // 做个边界判断，防止索引越界
    if (index >= 0 && index < result.length) {
      result[index] = 'on';
    }
  });

  // 现在result就是你期望的['on','on',' ','on',' ']格式了
  console.log(result);
  // 后续业务处理...
});

两种方案都能达到你的需求，如果你更关注前端控制选第一种，想减少前端代码就选第二种~

内容的提问来源于stack exchange，提问作者J.P