Web前端：全选框的使用

 整体代码：

<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结构部分

<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核心逻辑 

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

• addEventListener：向指定的元素添加事件监听器

• 重要：防止在DOM元素未加载前操作它们

3. 获取DOM元素

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

• getElementById()：通过id获取单个元素

• querySelectorAll()：通过CSS选择器获取元素集合（返回NodeList）

• 变量作用：

  • checkAll：控制全选的复选框

  • checkboxes：包含三个选项的数组

4. 更新全选状态函数

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. 全选按钮事

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

• 用户操作：点击"全选"复选框时触发

• 执行动作：

  1. 遍历所有选项，设置为全选框的当前状态

  2. 重置indeterminate属性（全选/全不选时不需要"-"状态）

6. 单个选项事件绑定 

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

• 循环绑定：为每个选项添加change事件监听

• 事件响应：当任意选项状态改变时，调用updateCheckAll()重新计算全选框状态