Angular：如何在代码中设置mat-checkbox的[checked]属性

嘿，针对你的需求，我有两种方案——优先推荐符合Angular最佳实践的方式，也能满足你直接操作元素的需求：

方案一：用Angular的ViewChildren获取复选框实例（推荐） #

这种方式不用直接碰DOM，而是通过Angular提供的ViewChildren获取所有子复选框的组件实例，直接设置它们的checked属性，完全贴合Angular的组件化思想。

步骤1：组件类里引入依赖并定义ViewChildren #

import { Component, ViewChildren, QueryList } from '@angular/core';
import { MatCheckbox } from '@angular/material/checkbox';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  // 通过模板引用变量获取所有子复选框实例
  @ViewChildren('checkbox') checkboxes!: QueryList<MatCheckbox>;

  checkAll() {
    // 先拿到主复选框的当前状态
    const masterCheckbox = document.querySelector('.master') as HTMLInputElement;
    const isChecked = masterCheckbox.checked;

    // 遍历子复选框，统一设置checked状态
    this.checkboxes.forEach(checkbox => {
      checkbox.checked = isChecked;
    });
  }
}

步骤2：给模板里的子复选框加模板引用变量 #

<mat-checkbox class="master" (click)='checkAll()'>Checkbox MASTER</mat-checkbox>
<mat-checkbox class="checkbox" #checkbox>Checkbox 2</mat-checkbox>
<mat-checkbox class="checkbox" #checkbox>Checkbox 3</mat-checkbox>

这样点击主复选框时，checkAll方法会同步所有子复选框的状态；取消主复选框后，子复选框就能独立操作了。

方案二：直接操作DOM元素（不推荐，不符合Angular理念） #

如果你确实想通过类选择器直接操作DOM，也能实现，但这种方式会绕开Angular的变更检测，容易出现状态不一致的问题：

checkAll() {
  const masterCheckbox = document.querySelector('.master') as HTMLInputElement;
  const isChecked = masterCheckbox.checked;

  // 获取所有.checkbox类下的原生复选框元素
  const checkboxes = document.querySelectorAll('.checkbox input[type="checkbox"]');
  checkboxes.forEach(checkbox => {
    (checkbox as HTMLInputElement).checked = isChecked;
    // 手动触发change事件，确保Angular能检测到状态变化
    checkbox.dispatchEvent(new Event('change'));
  });
}

为啥不推荐这种方式？ #

• Angular是数据驱动框架，直接操作DOM会打破数据和视图的绑定关系，后期维护麻烦
• 如果组件用了OnPush变更检测策略，直接改DOM可能不会触发视图更新
• 组件销毁或DOM结构变化时，容易出现报错

额外优化：子复选框全选时同步主复选框状态 #

要是你想在子复选框全部勾选时，自动把主复选框也勾上，可以加这个逻辑：

在组件类里加一个监听子复选框变化的方法：

onChildCheckboxChange() {
  const allChecked = this.checkboxes.every(checkbox => checkbox.checked);
  const masterCheckbox = document.querySelector('.master') as HTMLInputElement;
  masterCheckbox.checked = allChecked;
}

然后修改模板：

<mat-checkbox class="master" (click)='checkAll()'>Checkbox MASTER</mat-checkbox>
<mat-checkbox class="checkbox" #checkbox (change)="onChildCheckboxChange()">Checkbox 2</mat-checkbox>
<mat-checkbox class="checkbox" #checkbox (change)="onChildCheckboxChange()">Checkbox 3</mat-checkbox>

这样整个联动逻辑就更完整啦！

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