HTML5表单全选功能可通过五种方式实现：一、利用indeterminate状态与change事件同步控制；二、用data-group属性分组解耦；三、纯HTML5+CSS视觉示意；四、基于form.elements按name批量操作；五、事件委托优化大规模性能。
如果您在HTML5表单中需要用户一次性选中或取消所有复选框，则可通过JavaScript结合HTML5原生属性实现全选功能。以下是几种兼容性良好、语义清晰的实现方式：
一、使用checkbox的indeterminate状态与change事件监听
该方法利用全选复选框的checked状态控制子项，并通过indeterminate属性反映部分选中状态，提升用户体验。核心逻辑是监听全选框的change事件，同步更新所有目标复选框的checked值。
1、在HTML中定义一个全选复选框，其id为"selectAll"，并为所有待控制的复选框添加相同的class名，例如"class="item-checkbox"。
2、编写JavaScript代码，获取selectAll元素和所有item-checkbox元素。
立即学习“前端免费学习笔记（深入）”；
3、为selectAll绑定change事件，当其被勾选时，遍历所有item-checkbox，将其checked设为true；当其被取消勾选时，全部设为false。
4、为每个item-checkbox也绑定change事件，在其中统计已勾选数量，若全部勾选则设置selectAll.checked = true且removeAttribute("indeterminate")；若全部未勾选则设置selectAll.checked = false；否则设置selectAll.indeterminate = true。
二、使用data属性标记复选框组并动态绑定
该方法通过自定义data-group属性对复选框进行逻辑分组，避免硬编码class名，增强HTML结构可维护性。脚本根据data-group值自动识别关联项，实现解耦控制。
1、为全选复选框添加data-group="users"属性，同时为所有对应子复选框也添加data-group="users"。
2、编写函数selectAllByGroup(groupName)，接收groupName参数，使用document.querySelectorAll('[data-group="' + groupName + '"]')获取全部匹配元素。
3、过滤出非全选框的子项，遍历设置其checked属性为全选框当前checked值。
4、在页面加载完成后，为每个具有data-group属性的全选框调用该函数绑定事件。
三、纯HTML5+CSS方案（无JavaScript）
该方案利用HTML5的配合CSS :checked伪类，仅适用于静态展示场景，不支持真实表单提交，但可作为视觉全选示意。它完全规避JavaScript，依赖浏览器原生渲染机制。
1、使用内放置一个label元素，label的for属性指向一个隐藏的全选复选框。
2、将全选复选框设为type="checkbox"且position: absolute; left: -9999px;，确保其可交互但不可见。
3、通过CSS规则input[type="checkbox"]:checked ~ .item-checkbox { opacity: 1; }模拟视觉选中效果。
4、为每个.item-checkbox添加transition和transform样式，在父级:checked状态下触发缩放或背景变化动画。
四、使用form.elements与name属性批量操作
该方法基于HTML表单原生API，通过form.elements集合按name属性获取同名复选框组，无需额外class或data属性，适合传统表单结构。适用于name值统一且无其他同名控件的场景。
1、将所有待控制的复选框设置相同name属性，如name="options"，全选框单独命名，如name="selectAllOptions"。
2、获取包含这些复选框的
