Web前端：全选框的使用

整体代码：

javascript 复制代码

<div>
		<input type="checkbox" id="check-all" />
		<label for="check-all">全选</label>
	</div>
	  <div>
		  <input type="checkbox" class="checkbox-item" />
		  <label >选项1</label>
		  <input type="checkbox" class="checkbox-item" />
		  <label >选项2</label>
		  <input type="checkbox" class="checkbox-item" />
		  <label >选项3</label>
		    </div>
	<script>
		document.addEventListener('DOMContentLoaded', function () {
			var checkAll = document.getElementById('check-all');
			var checkboxes = document.querySelectorAll('.checkbox-item')
			function updateCheckAll() {
				var checkedCount = 0;
				checkboxes.forEach(function (checkbox) {
					if (checkbox.checked) checkedCount++
				});
				checkAll.checked = checkedCount === checkboxes.length;
				checkAll.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
				
			}


			checkAll.addEventListener('change', function () {
				checkboxes.forEach(function (checkbox) {
					checkbox.checked = checkAll.checked;
				});
				checkAll.indeterminate = false;
			});

			checkboxes.forEach(function (checkbox) {
				checkbox.addEventListener('change', updateCheckAll);
			})
		})
	</script>

1. HTML结构部分

html 复制代码

<div>
  <input type="checkbox" id="check-all" /> <!-- 全选复选框 -->
  <label for="check-all">全选</label> <!-- 全选标签 -->
</div>
  
<div>
  <input type="checkbox" class="checkbox-item" /> <!-- 选项1 -->
  <label>选项1</label>
  <input type="checkbox" class="checkbox-item" /> <!-- 选项2 -->
  <label>选项2</label>
  <input type="checkbox" class="checkbox-item" /> <!-- 选项3 -->
  <label>选项3</label>
</div>

<div>：分组容器
<input type="checkbox">：复选框元素
id="check-all"：全选按钮的唯一标识
class="checkbox-item"：三个选项的共同类名（用于批量选择）
<label> ：点击文字也能操作复选框（for属性需匹配id）

2. JavaScript核心逻辑

javascript 复制代码

document.addEventListener('DOMContentLoaded', function () {
  // 等待页面加载完成再执行代码
});

addEventListener：向指定的元素添加事件监听器
重要：防止在DOM元素未加载前操作它们

3. 获取DOM元素

javascript 复制代码

var checkAll = document.getElementById('check-all'); // 获取全选按钮
var checkboxes = document.querySelectorAll('.checkbox-item'); // 获取所有选项

getElementById()：通过id获取单个元素
querySelectorAll()：通过CSS选择器获取元素集合（返回NodeList）
变量作用：
- checkAll：控制全选的复选框
- checkboxes：包含三个选项的数组

4. 更新全选状态函数

javascript 复制代码

function updateCheckAll() {
  var checkedCount = 0; // 计数器：已选中的选项数
  
  // 遍历所有选项
  checkboxes.forEach(function (checkbox) {
    if (checkbox.checked) checkedCount++; // 如果选中则计数+1
  });

  // 设置全选框状态：
  checkAll.checked = (checkedCount === checkboxes.length); // 全部选中时打勾
  checkAll.indeterminate = (checkedCount > 0 && checkedCount < checkboxes.length); // 部分选中时显示"-"状态
}

核心逻辑：
1. 遍历每个选项，统计被选中的数量
2. 三种状态处理：
  - 全选：选中数 = 总数 → checked=true
  - 全不选 ：选中数 = 0 → checked=false
  - 部分选 ：0 < 选中数 < 总数 → indeterminate=true（显示横线"-"状态）

5. 全选按钮事

javascript 复制代码

checkAll.addEventListener('change', function () {
  // 当全选框状态变化时
  checkboxes.forEach(function (checkbox) {
    checkbox.checked = checkAll.checked; // 所有选项同步全选框状态
  });
  checkAll.indeterminate = false; // 强制取消"-"状态（全选/全不选时）
});

用户操作：点击"全选"复选框时触发
执行动作：
1. 遍历所有选项，设置为全选框的当前状态
2. 重置indeterminate属性（全选/全不选时不需要"-"状态）

6. 单个选项事件绑定

javascript 复制代码

checkboxes.forEach(function (checkbox) {
  checkbox.addEventListener('change', updateCheckAll); // 选项变化时更新全选框状态
});

循环绑定 ：为每个选项添加change事件监听
事件响应 ：当任意选项状态改变时，调用updateCheckAll()重新计算全选框状态