必须在每行复选框的value或data-id属性中显式绑定唯一ID，通过事件委托监听change事件获取已勾选ID数组，构造标准JSON请求（如{ids:[1024,1025]}），成功响应后再同步删除DOM行并重置状态，确保DOM、内存与服务端三态一致。
怎么给表格每行加复选框并绑定数据ID
批量删除的前提是能准确识别哪些行被选中，不能只靠视觉勾选状态。关键是在 <input type="checkbox"> 上用 data-id 或 value 显式存对应记录的唯一标识（比如数据库主键），而不是依赖行号或 DOM 位置。
常见错误是把 value 设成空字符串或固定值，导致 JS 读不到真实 ID；或者用 id 属性存 ID，但 id 必须全局唯一，多行容易冲突。
- 推荐写法：
<input type="checkbox" data-id="1024"> - 如果后端返回的是整数 ID，直接用
value也行：<input type="checkbox" value="1024">，但注意避免非数字字符 - 不要在
onclick里硬编码逻辑，统一用事件委托绑定到表格或容器上
如何用 JavaScript 获取所有已勾选的 ID 并构造请求参数
遍历复选框时别用 document.querySelectorAll('input[type="checkbox"]:checked') 然后逐个取 .value —— 这样拿到的是字符串，且没做空值校验。更稳妥的方式是过滤出有有效 data-id 的已勾选项，并转为数字或保持字符串一致格式。
后端接口通常接受数组形式的 ID 列表，比如 { ids: [1024, 1025, 1026] }，而不是拼接成逗号字符串（除非明确约定）。
立即学习“前端免费学习笔记（深入）”；
- 获取 ID 数组示例：
const selectedIds = Array.from( document.querySelectorAll('#myTable input[type="checkbox"]:checked') ).map(cb => cb.dataset.id).filter(id => id !== ''); - 如果后端要求整数，加
.map(Number)，但要提防 NaN，建议先filter掉无效值 - 删除前务必弹窗确认，尤其避免误触“全选+删”导致清空数据
点击“批量删除”按钮后怎么安全发起请求并更新表格视图
发请求不能只管成功，得处理网络失败、后端报错、部分删除成功等边界情况。直接从 DOM 删除行而不等接口响应，会导致 UI 和数据不一致（比如请求失败但行已消失）。
正确顺序是：收集 ID → 发请求 → 成功后再移除对应行 → 清空勾选状态。失败时应恢复勾选状态或给出明确提示。
- 禁用按钮防止重复提交：
btn.disabled = true;，完成后重置 - 删除行时优先用
row.remove()，比row.parentNode.removeChild(row)更简洁 - 如果表格用了分页，删完需刷新当前页数据，不能只删前端 DOM
- 避免用
location.reload()强刷页面，体验差且可能丢失未保存操作
全选/取消全选功能容易漏掉哪些细节
“全选”复选框本身也要参与批量操作逻辑，但它和普通行复选框行为不同：它控制其他框的状态，但自身不带 data-id。常见坑是点击全选后，再手动取消某几行，但全选框状态没同步回退；或者全选框没监听 change 而是 click，导致键盘空格切换时失效。
- 全选框应监听
change事件，设置所有行框的checked属性 - 每行框也要监听
change，反向更新全选框状态：统计已勾选数量是否等于总行数 - 注意动态增删行时，全选逻辑要重新绑定或用事件委托，否则新行不受控
- 如果表格有分页，“全选”一般只作用于当前页，别误设计成全量选择
真正麻烦的不是勾选和发请求，而是状态同步——DOM 状态、内存数据、服务端数据三者之间稍有脱节，用户就会觉得“删了但还在”或“没删却消失了”。留好日志、加 loading 态、提供撤销入口，比写对 delete 请求更重要。
