
本文讲解如何在 laravel 中通过表单复选框安全、规范地收集多个用户的姓名和邮箱,并持久化到数据库,涵盖 html 结构修正、后端验证与批量插入等关键实践。
在 Laravel 中处理多选复选框(如选择审批人)时,核心在于:前端需以数组形式提交数据,后端需正确解析并批量写入数据库。你当前的代码存在几个关键问题,我们逐一优化解决。
✅ 1. 修正 HTML 复选框结构
原代码中 标签重复了 type 和 value 属性,且缺失必需的 name 属性(这是表单提交的关键)。此外,仅绑定 name 不足以保存邮箱——我们需要将用户 ID 作为值(推荐),再在后端关联查询完整信息,既安全又符合 REST 原则。
<!-- 推荐做法:使用 user id 作为 value,避免直接暴露 name/email -->
@foreach($users as $user)
<ul class="list-group">
<li class="list-group-item">
<div class="row align-items-center">
<div class="col-auto">
<input
type="checkbox"
name="selected_users[]" <!-- 关键:[] 表示数组,Laravel 自动接收为数组 -->
value="{{ $user->id }}" <!-- 使用 ID 而非 name,防 XSS & 便于关联 -->
class="form-check-input"
id="user-{{ $user->id }}"
>
</div>
<div class="col-1 c-avatar mr-3">
@@##@@
</div>
<div class="col-8">
<div class="font-weight-bold">{{ $user->name }}</div>
<small class="text-secondary">{{ $user->email }}</small>
</div>
</div>
</li>
</ul>
@endforeach⚠️ 注意: 移除冗余的 onclick="checkBox(this)" 和手动 DOM 操作逻辑(如 document.getElementById('listUser').innerHTML += ...),这些属于 UI 交互层,不应干扰表单数据提交逻辑; 若需实时预览已选项,建议用 Vue 或纯 JS 绑定 change 事件独立处理,与表单提交解耦。
✅ 2. 构建标准表单并提交
确保复选框包裹在










