如何在Node.js和EJS模板引擎中仅传递勾选复选框的项

1. 修改EJS表单代码 #

要实现仅传递勾选复选框的用户信息，核心是给每个复选框添加name属性（采用数组格式attendees[]）和value属性（绑定用户唯一标识，比如ID），这样提交表单时只有勾选的项会被纳入请求体。修改后的代码如下：

<form action="/attendence" method="post">
  <ul>
    <% for (let user of usersdata) { %>
    <li class="listItems">
      <a class="names" href="/users/<%=user.id%>"> <%=user.username%> </a>
      <!-- 新增name和value属性，name用数组格式收集勾选项 -->
      <input type="checkbox" class="checkbox" name="attendees[]" value="<%=user.id%>" />      
    </li>
    <% } %>
  </ul>
  <button type="submit">提交考勤</button>
</form>

2. 后端Node.js（Express）处理逻辑 #

确保已配置表单数据解析中间件（Express 4.16+内置express.urlencoded），然后在路由中接收勾选的用户ID数组，再筛选出对应的用户信息：

const express = require('express');
const app = express();

// 解析表单类型请求体
app.use(express.urlencoded({ extended: true }));

// 处理/attendence的POST请求
app.post('/attendence', (req, res) => {
  // 获取勾选的用户ID数组，无勾选时设为空数组
  const selectedUserIds = req.body.attendees || [];
  
  // 从用户数据集中筛选出勾选的用户信息
  const selectedUsers = usersdata.filter(user => selectedUserIds.includes(user.id.toString()));
  
  // 后续业务逻辑：比如保存考勤记录、返回响应
  console.log('勾选的用户信息:', selectedUsers);
  res.redirect('/attendence-success'); // 示例：跳转至成功页面
});

关键说明 #

• name="attendees[]"：这种数组格式的name属性，浏览器会自动将所有勾选复选框的value值整理成数组提交到后端。
• 后端需处理未勾选的边界情况：若没有任何复选框被勾选，req.body.attendees会不存在，因此默认设为空数组避免报错。
• 若需直接传递完整用户信息，可将value设为<%=JSON.stringify(user)%>，但需注意转义处理；更稳妥的方式是传递ID后在后端查询完整信息。

内容的提问来源于stack exchange，提问作者Gaurav Bahuguna