复选框批量删除需前后端协同设防：name必须为数组语法（如name="ids[]"或name="ids"），前端校验至少选一项并禁用按钮，后端严格校验id类型、范围及幂等性。
复选框 name 属性必须用数组语法
批量删除的前提是后端能一次性接收到多个 ID，否则只能删一个。关键就在 <input type="checkbox"> 的 name 属性写法：必须带方括号，比如 name="ids[]"（PHP）或 name="ids"（Node.js/Express 默认解析为数组），否则即使勾选多个，后端收到的也只是最后一个值。
常见错误是写成 name="id" 或 name="checkbox"，这样提交后 req.body.ids 是字符串或单个值，Array.isArray() 会返回 false，后续遍历直接出错。
- PHP 场景：用
name="ids[]"，$_POST['ids']自动是数组 - Express 场景：用
name="ids"，配合urlencoded({ extended: true })中间件才能正确解析为数组 - 前端 JS 获取时，
document.querySelectorAll('input[name="ids"]:checked')比getElementsByName更可靠
提交前必须校验至少有一个复选框被选中
用户点“批量删除”但没勾任何选项，后端若不做防御，可能误删全表或报 SQL DELETE WHERE id IN () 语法错误。这个校验不能只靠后端，前端也要拦截，避免无意义请求。
典型错误是只在后端判断空数组，却忽略前端体验和资源浪费。校验逻辑要轻量、即时、明确提示。
- 用
document.querySelectorAll('input[name="ids"]:checked').length === 0判断 - 触发时机建议放在表单
submit事件里，而不是按钮click，防止回车提交绕过 - 提示文案别写“请勾选”，直接说“请至少选择一项要删除的数据”更清晰
后端处理时必须对 ID 做类型与范围校验
前端传来的 ids 是字符串数组（如 ["1", "2", "abc"]），直接拼进 SQL 或传给 ORM 极易引发注入或运行时错误。尤其当数据库主键是整型时，"abc" 这类非法值会导致查询失败或静默过滤。
不校验的后果不只是报错——还可能让攻击者通过构造 ids[]=1;DROP TABLE users-- 类似参数绕过简单过滤。
- 逐项用
parseInt()或正则/^\d+$/过滤，丢弃非数字项（不要用Number()，它把空字符串转成 0） - 检查转换后是否为有效正整数且大于 0，避免传入
-1或0 - ORM 场景下，仍需用参数化查询，例如 Knex 的
.whereIn('id', validIds)，别手动拼 SQL
删除后页面状态要及时同步，避免重复提交或界面错乱
用户点了“批量删除”，成功后如果只是刷新整个页面，体验卡顿；如果什么也不做，被删的行还显示在列表里，用户可能再点一次，导致重复操作或困惑。
最常被忽略的是「重复提交」问题：用户手快连点两次，而接口又没做幂等设计，结果删了两遍——第二次虽然没数据可删，但日志和审计可能已记录异常行为。
- 提交后立即将按钮置为
disabled，并改文字为“删除中…” - 成功后用 JS 批量移除对应 DOM 行（根据
data-id属性匹配），比整页 reload 更快 - 服务端接口建议加简单幂等支持，比如用
WHERE id IN (?) AND deleted_at IS NULL，确保重复请求无副作用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
