NextJS表单提交时无法获取选中复选框列表的问题

方法1：正确使用FormData的getAll方法 #

你当前代码里直接console.log(formData)看不到实际数据（FormData是迭代器对象），而且多个同名复选框的选中值需要用getAll方法才能完整获取。修改handleSubmit函数如下：

const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
  event.preventDefault();

  const form = document.getElementById('roles-form') as HTMLFormElement;
  const formData = new FormData(form);
  
  // 获取所有选中的角色ID数组
  const selectedRoles = formData.getAll('roles');
  console.log('选中的角色ID:', selectedRoles);
};

方法2：直接通过DOM查询选中的复选框 #

如果不想用FormData，也可以直接在表单中筛选已选中的复选框：

const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
  event.preventDefault();

  const form = document.getElementById('roles-form') as HTMLFormElement;
  // 查询所有name为roles且被选中的input元素
  const checkedCheckboxes = form.querySelectorAll('input[name="roles"]:checked');
  // 转换为角色ID数组
  const selectedRoles = Array.from(checkedCheckboxes).map(checkbox => checkbox.value);
  console.log('选中的角色ID:', selectedRoles);
};

核心问题说明 #

你的复选框代码本身没有问题，问题出在：

• FormData对象不能直接通过console.log查看内容，必须用get/getAll方法提取数据
• 多个同名复选框的情况下，FormData会存储多组键值对，get方法只会返回第一个匹配值，必须用getAll才能拿到所有选中的角色ID

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