Angular复选框change事件如何输出选中状态的布尔值(true/false)

方法一：通过事件对象直接获取 #

你可以借助$event.target.checked拿到复选框的选中状态（原生布尔值），只需在组件方法中对事件对象做类型断言即可：

模板代码：

<input type="checkbox" (change)="getHighlyLevarageMeasure($event)" />

组件类代码：

getHighlyLevarageMeasure(event: Event) {
  // 将事件目标断言为HTML输入元素，获取checked属性
  const isChecked = (event.target as HTMLInputElement).checked;
  console.log(isChecked); // 选中时输出true，未选中时输出false
  
  // 此处可根据isChecked执行后续业务逻辑
}

方法二：使用双向绑定（更贴合Angular编码风格） #

如果需要在组件中直接维护选中状态，推荐用[(ngModel)]双向绑定一个布尔变量，无需依赖事件对象就能获取状态：

模板代码：

<input type="checkbox" [(ngModel)]="isHighlyLeverageChecked" (change)="getHighlyLevarageMeasure()" />

组件类代码：

// 初始化默认未选中
isHighlyLeverageChecked = false;

getHighlyLevarageMeasure() {
  console.log(this.isHighlyLeverageChecked); // 直接获取布尔值状态
}

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