表格行内复选框必须通过data-id或value绑定唯一业务ID，严禁依赖DOM索引；批量删除时只采集已勾选复选框的value或dataset.id，构造{ids:[123,456]}格式请求，成功后按ID精准移除对应tr并同步状态。
表格行内复选框怎么绑定到 data-id 而不是索引
直接用 index 做删除依据非常危险——数据翻页、筛选或排序后，索引就失效了。必须让每行明确携带唯一标识。
正确做法是在 <tr> 或复选框上挂真实 ID：<pre class="brush:php;toolbar:false;"><tr data-id="123">
<td><input type="checkbox" value="123"></td>
<td>用户A</td>
</tr></pre><p>后续批量操作时，只取 <code>input:checked 的 value（或从父 <tr> 读 <code>data-id），不依赖 DOM 位置。
- 避免用
$('tbody input').eq(i).val()这类基于顺序的写法 - 如果后端返回的是对象数组，渲染时务必把
id字段透传进 checkbox 的value - Bootstrap 的
.table样式本身不干涉这个逻辑，但要注意自定义 checkbox（如用form-check-input）时别漏掉value
$.ajax 批量删除请求体该用 POST 还是 DELETE？参数放哪
RESTful 风格倾向用 DELETE + 请求体传 ID 数组，但部分老浏览器或代理会拦截带 body 的 DELETE。生产环境更稳妥的选择是 POST 到 /api/users/batch-delete。
后端接收方式决定前端构造方式。常见且兼容性最好的是：
$.ajax({
url: '/api/items/batch-delete',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ ids: [123, 456, 789] }),
success: function(res) { /* ... */ }
});- 别用
traditional: true拼 query string（如?ids[]=123&ids[]=456），ID 多了容易超 URL 长度限制 - 如果后端只认表单格式（
application/x-www-form-urlencoded），就改用data: { ids: [123, 456] }，jQuery 会自动序列化 - 务必加
contentType声明，否则后端可能收不到 JSON body
删除后表格局部刷新怎么做才不闪、不丢状态
整页重载或 location.reload() 看似简单，但会丢失当前页码、搜索关键词、排序方向等状态。应该只删 DOM 节点，并同步更新分页数据。
关键动作有三步：收集 ID → 发请求 → 成功后移除对应行（用 data-id 精准定位）：
const idsToDelete = $('tbody input:checked').map((i, cb) => cb.value).get();
if (!idsToDelete.length) return;
<p>$.post('/api/items/batch-delete', { ids: idsToDelete }).done(() => {
idsToDelete.forEach(id => $('tr[data-id="' + id + '"]').remove());
// 可选：更新页脚文字，如 “共 24 条，已显示 10 条”
});- 不要用
$('tbody tr').filter(':has(input:checked)')—— 效率低，且在复杂模板中易误匹配 - 如果用了 Bootstrap Table 插件（
bootstrap-table），优先调用其removeByUniqueId方法，它会自动维护内部缓存 - 记得禁用删除按钮防重复提交，成功后再恢复；否则网络慢时用户狂点，可能触发多次删除
“全选”复选框和子项联动的坑在哪
Bootstrap 自带的 checkbox 样式不影响逻辑，但事件绑定容易出错：用 change 而不是 click，并注意冒泡干扰。
典型结构：
<thead> <th><input type="checkbox" id="check-all"></th> </thead> <tbody> <tr><td><input type="checkbox" value="123"></td></tr> </tbody>
监听和同步逻辑要双向：
-
$('#check-all').on('change', ...)控制所有子项 checked 状态 - 每个子项也要
.on('change', ...)去反推全选框状态（比如 5 行里勾了 4 行，全选框应为 indeterminate，但原生 checkbox 不支持，得用 JS 模拟或换组件） - 千万别在子项 change 里直接
$('#check-all').prop('checked', true)—— 这会导致全选框变化又触发一次 change，无限循环 - 用
prop('indeterminate', true)设置半选态时，记得之后手动设checked为false，否则点击后行为异常
实际批量删除最常卡住的地方，不在样式或按钮，而在 ID 的来源是否稳定、请求是否幂等、以及 DOM 移除后分页总数有没有重新计算。这些环节一松动，用户就会遇到“明明删了却还在列表里”或者“删完跳回第一页但数据显示错乱”。
