全选功能的核心是状态同步与唯一标识机制，需同时满足获取行复选框、监听表头变化、批量赋值checked属性；动态渲染须dom就绪后绑定事件；layui依赖id字段和checkbox列首位；vue中应通过响应式数据而非dom操作驱动。

表头复选框控制全行选择，核心不是“加个 checkbox”，而是绑定状态同步逻辑和唯一标识机制。 直接塞一个 <input type="checkbox"> 到表头，几乎必然失效——它只是静态元素，不参与任何状态管理。

原生 JavaScript 实现全选联动的关键点

必须同时满足三件事：获取到所有行内复选框、监听表头变化、用 checked 属性批量赋值。常见错误是只做了前两步，忘了第三步的赋值逻辑或写错作用域。

• document.querySelectorAll('.row-checkbox') 要能准确命中所有行复选框（推荐加统一 class，避免用 input[type="checkbox"] 这类宽泛选择器）
• 表头复选框的 click 事件里，必须写 ck[i].checked = this.checked，而不是 ck[i].setAttribute('checked', ...) —— 后者只改 HTML 属性，不触发 DOM 的 checked 状态
• 如果表格数据是动态渲染（比如 fetch 后插入），事件绑定必须在 DOM 插入完成后执行，否则 querySelectorAll 返回空 NodeList

Layui 表格中 type: 'checkbox' 不生效？检查 id 字段和列顺序

Layui 的 table.checkStatus() 依赖每行数据有 id 字段，且 {type: 'checkbox'} 必须放在 cols 数组的第一位。漏掉任意一项，表头点击就“看起来没反应”。

Regie.ai

一款面向销售团队的 AI 销售内容与沟通平台，帮助企业生成个性化销售文案、客户触达内容并辅助开展规模化外呼和拓客工作。

下载

• 后端返回的数据里没有 id？前端要用 parseData 映射：把 user_id → id，不能靠 where: { idKey: 'user_id' } —— Layui 不支持这个配置项
• 写了 {field: 'xxx', title: '<input...>'}</input...>？这是错的。必须是纯对象 {type: 'checkbox'}，不带 field、title、templet
• 想只选当前页？放弃内置 type: 'checkbox'，改用自定义列 + 手动操作 table.cache['myTable']，但要注意 table.checkStatus() 将无法返回正确结果

Vue 组件中全选状态不同步？别直接操作 DOM

在 el-table 或 vue-good-table 里，不要用 document.querySelector 去改复选框的 checked，这会破坏响应式链路。应该通过绑定的 model 变量驱动 UI。

• el-table：用 v-model 绑定每行的 checked 字段，再用计算属性控制表头 v-model 的值和 indeterminate 状态
• vue-good-table：启用 :selectable="true" 即可自动渲染表头复选框；获取选中行用 @on-selected-rows-change 事件，不是查 DOM
• 手动触发全选又不想刷新整个表格？用 this.$refs.multipleTable.toggleAllSelection()（el-table）或 tableRef.selectAll()（vue-good-table）

最容易被忽略的是：全选功能从来不是孤立的 DOM 操作，它依赖数据唯一性（id）、框架响应式机制、以及事件与状态的严格对应。少一个环节，就会出现“勾了表头但行没变”或“勾了某行但表头没更新”这类问题。