如何实现点击按钮时动态触发指定Checkbox的点击事件？

DevOps 小满

2026-7-20

Angular中点击按钮触发Mat-Checkbox勾选状态切换的实现方案

方案一：操作FormControl（推荐）

你的mat-checkbox已经绑定了formControl，直接修改表单控件的值就能同步更新复选框的勾选状态，这是Angular响应式表单的标准做法，无需操作DOM。

实现步骤：

在组件类中编写toggleUserSelection方法，对绑定的FormControl值取反：

toggleUserSelection() {
  // 兼容初始值为null/undefined的情况，默认设为false
  const currentState = this.xxxx.value ?? false;
  this.xxxx.setValue(!currentState);
}

原按钮和复选框的模板代码无需修改，FormControl的变化会自动同步到mat-checkbox的勾选状态，完全模拟手动点击复选框的效果。

方案二：通过组件实例触发切换（适合特殊场景）

如果需要直接模拟复选框的点击行为，可以通过ViewChild获取MatCheckbox组件实例，调用其内置的切换方法。

实现步骤：

给模板中的mat-checkbox添加模板引用变量：

<mat-checkbox #userCheckbox [formControl]="xxxx">{{displayName}}</mat-checkbox>

在组件类中引入相关依赖并实现切换逻辑：

import { ViewChild } from '@angular/core';
import { MatCheckbox } from '@angular/material/checkbox';

// ...

@ViewChild('userCheckbox') userCheckbox!: MatCheckbox;

toggleUserSelection() {
  // 调用MatCheckbox的toggle方法，直接切换勾选状态
  this.userCheckbox.toggle();
}

注：这种方式调用组件官方API触发状态变化，比直接操作DOM更安全，符合Angular组件封装规范。

方案三：直接操作DOM（不推荐）

不建议直接操作DOM，但如果有极端需求，可以通过获取复选框原生输入元素触发点击：

import { ViewChild, ElementRef } from '@angular/core';

// ...

@ViewChild('userCheckbox', { read: ElementRef }) userCheckboxRef!: ElementRef;

toggleUserSelection() {
  // 获取原生input元素并触发点击事件
  this.userCheckboxRef.nativeElement.querySelector('input').click();
}