用 data-group 批量控制复选框需用属性选择器定位同组元素，再 filter 排除自身，遍历设置 checked；data-group 仅用于 js 分组，不影响表单提交；多组共存时值须唯一；必须限定 input[type="checkbox"] 避免误操作；ie 中值禁用空格；手动取消子项后需主动计算并设置全选框 indeterminate 状态。
用 data-group 批量控制复选框，比靠 class 或 name 更灵活，但必须手动过滤全选框本身，否则会把自己也勾上。
怎么用 data-group 选中同组所有复选框
核心是用属性选择器定位，再排除掉触发事件的那个全选框。不能直接对所有匹配元素赋值 checked，否则全选框自己也会被改状态。
- 给全选框加
data-group="users"，所有子复选框也加相同值 - 在 change 回调里，先取全部：
document.querySelectorAll('[data-group="users"]') - 用
Array.from()转成数组，再.filter(cb => cb !== event.target)剔除自身 - 遍历剩余项，设
cb.checked = event.target.checked—— 注意是.checked，不是setAttribute
data-group 和 name 混用时要注意什么
如果子复选框同时有 name="item_id" 和 data-group="orders"，表单提交仍只认 name；data-group 纯属 JS 控制逻辑分组，不影响原生表单行为。
- 提交时后端收到的是
item_id[]=1024&item_id[]=1025，不是data-group的值 - JS 里想获取已勾选项的 ID，优先读
cb.value或cb.dataset.id，别依赖data-group - 多个复选框组共存时（比如“用户”和“订单”），
data-group值必须唯一，否则会跨组误操作
为什么不能直接用 querySelectorAll('[data-group]') 统一批量赋值
这个选择器会命中页面里所有带 data-group 的元素，包括按钮、div、甚至其他无关控件，不加类型限定极易出错。
- 正确写法必须限定标签和类型：
input[type="checkbox"][data-group="logs"] - 如果组内混有
radio或button，不加[type="checkbox"]会导致报错Cannot set property 'checked' of undefined - IE 不支持属性值含空格或特殊字符，
data-group="user list"在旧环境会失效，建议只用字母数字下划线
真正麻烦的不是怎么勾，而是状态同步：当用户手动取消某一项后，全选框得立刻变成 indeterminate，而这个状态不会自动产生，必须每次变更后手动计算并设置——这点最容易被跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
