如何在Node.js后端识别表单中被选中的特定复选框？

我懂你现在的困扰——页面里每个网站条目对应一个复选框，提交表单后却只拿到['on']，完全没法区分到底是哪个网站的复选框被勾选了对吧？

问题根源 #

你原来的后端代码只是把复选框的value收集起来，但默认情况下复选框的value就是'on'，不管哪个复选框被选中，返回的都是这个值，自然没法对应到具体的网站条目。从你给出的req.body输出也能看到，实际提交的数据是像checkbox0: 'on'这样带索引的键值对，关键信息其实藏在键名里，而不是值里。

你的解决方案（可行） #

你后来修改的代码思路是对的：通过筛选出所有以checkbox开头的键，然后从键名末尾截取索引（比如checkbox0截取后得到0），把这些索引存到bwIndexes数组里，这样就能明确知道是第几个网站的复选框被选中了。

你的解决代码：

router.post('/', (req, res, next) => {
  var bwIndexes = [];
  var checkboxes = Object.keys(req.body)
    .filter(key => key.startsWith('checkbox'))
    .map(k => bwIndexes.push(k.slice(-1)));
  console.log(bwIndexes);
  console.log(req.body);
  res.redirect('/reports');
});

比如如果checkbox0和checkbox2被选中，bwIndexes就会输出['0', '2']，完美对应到对应的网站条目。

更健壮的优化方案 #

其实我们可以在渲染EJS模板的时候，直接给复选框设置有意义的value，并把name改成数组形式，这样后端处理会更简洁：

修改EJS里的复选框代码：

<input type="checkbox" name="checkboxes" id="checkbox<%= i %>" value="<%= i %>">

这里把name设为checkboxes（表单里同名的复选框会自动以数组形式提交），同时把value设为当前条目的索引i。

对应的后端代码可以简化成：

router.post('/', (req, res, next) => {
  // 处理没有复选框被选中的情况，避免undefined
  const selectedIndexes = req.body.checkboxes || [];
  console.log('选中的网站条目索引：', selectedIndexes);
  res.redirect('/reports');
});

这样当多个复选框被选中时，selectedIndexes直接就是包含所有选中索引的数组（比如['0','2']），不用再从键名里截取字符串，代码更直观也更健壮，就算以后键名规则变化也不会影响功能。

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