Angular中如何通过列表复选框勾选/取消勾选设置或重置全选状态

我正在处理一组用于两种操作的复选框（如图所示），目前已实现勾选CopyAll时选中所有复制复选框，但需要实现：

• 当所有子复制复选框均被勾选时自动选中CopyAll
• 当所有子复制复选框均被取消勾选时自动重置CopyAll的选中状态

可以通过监听子复选框的change事件，实时判断选中状态来控制全选框，以下是原生JavaScript实现：

// 获取全选框和所有复制操作的子复选框
const copyAllCheckbox = document.getElementById('copy-all');
const copyCheckboxes = document.querySelectorAll('.copy-checkbox');

// 绑定子复选框的change事件
copyCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', () => {
    // 统计已勾选的子复选框数量
    const checkedCount = document.querySelectorAll('.copy-checkbox:checked').length;
    // 判断是否全选
    copyAllCheckbox.checked = checkedCount === copyCheckboxes.length;
    // 可选：支持半选状态（部分选中时全选框显示灰色不确定样式）
    // copyAllCheckbox.indeterminate = checkedCount > 0 && checkedCount < copyCheckboxes.length;
  });
});

代码说明 #

• 给所有复制操作的子复选框统一加类名（比如示例中的copy-all-checkbox），全选框设置唯一ID（比如copy-all），根据实际HTML结构调整选择器
• 每次子复选框状态变化时，统计已勾选数量和总数量：
  • 数量相等时，自动勾选CopyAll
  • 启用注释的indeterminate代码后，部分选中时全选框会显示灰色不确定状态，更符合常规交互体验
• 页面初始化时建议执行一次判断逻辑，避免默认选中的子复选框和全选框状态不匹配

如果用jQuery可以简化代码：

$('#copy-all').siblings('.copy-checkbox').on('change', function() {
  const total = $('.copy-checkbox').length;
  const checked = $('.copy-checkbox:checked').length;
  $('#copy-all').prop('checked', checked === total);
  // 半选状态：
  // $('#copy-all').prop('indeterminate', checked > 0 && checked < total);
});

动态生成复选框的处理 #

如果复选框是通过AJAX等方式动态加载的，改用事件委托绑定：

document.addEventListener('change', function(e) {
  if (e.target.classList.contains('copy-checkbox')) {
    const checkedCount = document.querySelectorAll('.copy-checkbox:checked').length;
    const totalCount = document.querySelectorAll('.copy-checkbox').length;
    document.getElementById('copy-all').checked = checkedCount === totalCount;
  }
});

内容的提问来源于stack exchange，提问作者Rahul Mahajan