一、基础场景与实现原理
典型应用场景
-
表格批量操作
-
购物车商品全选
-
邮件列表管理
-
批量文件操作
核心实现逻辑
-
全选框与子选框的关联绑定
-
双向状态同步机制
-
动态数据更新处理
二、HTML基础结构
<!-- 全选控制器 -->
<div class="select-control"><input type="checkbox" id="selectAll"> 全选/取消
</div><!-- 数据列表 -->
<ul class="item-list"><li><input type="checkbox" class="itemCheckbox"> 选项1</li><li><input type="checkbox" class="itemCheckbox"> 选项2</li><li><input type="checkbox" class="itemCheckbox"> 选项3</li>
</ul>三、JavaScript核心实现
1. 元素获取
const selectAll = document.getElementById('selectAll');
const checkboxes = document.querySelectorAll('.itemCheckbox');2. 全选功能实现
// 全选框点击事件
selectAll.addEventListener('click', function() {const isChecked = this.checked;checkboxes.forEach(checkbox => {checkbox.checked = isChecked;});
});// 子选框点击事件
checkboxes.forEach(checkbox => {checkbox.addEventListener('click', function() {// 检测是否全部选中const allChecked = [...checkboxes].every(c => c.checked);// 检测是否有选中项const anyChecked = [...checkboxes].some(c => c.checked);selectAll.checked = allChecked;selectAll.indeterminate = !allChecked && anyChecked;});
});四、增强功能实现
1. 中间态显示
// 设置indeterminate属性显示半选状态
selectAll.indeterminate = !allChecked && anyChecked;2. 动态数据支持
// 监听DOM变化
const observer = new MutationObserver(mutations => {checkboxes = document.querySelectorAll('.itemCheckbox');
});observer.observe(document.body, { childList: true, subtree: true });3. 性能优化
// 使用事件委托
document.querySelector('.item-list').addEventListener('click', e => {if(e.target.classList.contains('itemCheckbox')) {// 处理逻辑}
});五、完整示例代码
<!DOCTYPE html>
<html>
<head><style>.indeterminate { background: #ddd; }</style>
</head>
<body><div class="control"><input type="checkbox" id="selectAll"> 全选<span id="count">已选0项</span></div><div class="list"><div><input type="checkbox" class="item"> 选项A</div><div><input type="checkbox" class="item"> 选项B</div><div><input type="checkbox" class="item"> 选项C</div></div><script>const selectAll = document.getElementById('selectAll');let items = document.querySelectorAll('.item');// 全选控制selectAll.addEventListener('change', function() {items.forEach(item => item.checked = this.checked);updateCount();});// 子项控制document.querySelector('.list').addEventListener('change', e => {if(!e.target.classList.contains('item')) return;const allChecked = [...items].every(i => i.checked);const anyChecked = [...items].some(i => i.checked);selectAll.checked = allChecked;selectAll.indeterminate = !allChecked && anyChecked;updateCount();});// 更新计数器function updateCount() {const count = [...items].filter(i => i.checked).length;document.getElementById('count').textContent = `已选${count}项`;}</script>
</body>
</html>通过本文的实现方案，可以构建出健壮的全选功能系统。核心要点在于保持状态同步的准确性和处理动态内容的灵活性，开发者可根据具体业务需求进行功能扩展和优化
