如何在后端读取表单中forEach循环生成的已勾选复选框值

你当前为每个动态生成的复选框设置了动态的name属性（值为对应好友名称），后端无法预先枚举所有可能的name取值，且未勾选的复选框默认不会被浏览器提交到后端，是无法正常读取选中值的核心原因。

方案1（推荐）：统一name属性提交数组 #

这是处理同组多复选框的标准方案：

• 前端修改复选框代码，将name固定为selectedFriends[]，同时把好友名称作为value属性的值：

<input type="checkbox" name="selectedFriends[]" value="<%= f.name %>">

• 后端直接读取req.body.selectedFriends即可，返回值为所有已勾选的好友名称组成的数组，未勾选的不会出现在数组中。

方案2：JS预收集选中值后提交 #

如果你的业务场景必须保留动态name的写法，可以用前端JS预处理数据：

• 在表单内新增隐藏输入框存储选中值：

<input type="hidden" name="checkedFriends" id="checkedFriends">

• 监听表单提交事件，收集已勾选复选框的name值写入隐藏框：

document.querySelector('form').addEventListener('submit', function(e) {
  const checkedNames = Array.from(document.querySelectorAll('input[type="checkbox"]:checked'))
    .map(item => item.name)
  document.getElementById('checkedFriends').value = JSON.stringify(checkedNames)
})

• 后端读取req.body.checkedFriends后做JSON解析，即可得到所有已勾选的好友名称列表。

• 如果你用的是Express类的Node后端框架，需要提前配置表单解析中间件express.urlencoded({ extended: true })，否则无法正确识别数组类型的表单参数。
• 只有被勾选的复选框会被提交到后端，不要使用「判断对应字段是否为false」的逻辑做校验，直接判断目标名称是否存在于返回的选中列表即可。

内容的提问来源于stack exchange，提问作者Yash Singhal