如何在Angular中点击按钮实现全部复选框批量取消选中功能

现有代码的问题 #

• 三个复选框复用了相同的id属性checkbox，document.getElementById只能匹配到页面第一个符合id的元素，无法控制全部复选框
• myFunction内使用的是全等比较运算符===而非赋值运算符=，就算匹配到元素也不会修改其选中状态
• 直接操作原生DOM不符合Angular的最佳开发实践，后续维护成本更高

推荐解决方案（Angular双向绑定方案） #

该方案不需要操作DOM，完全依托Angular的响应式能力实现需求：

1. 先确保你项目的AppModule中已经导入了FormsModule，用于支持双向绑定：

// app.module.ts 中新增导入
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [ /* 其他导入 */ FormsModule ]
})
export class AppModule { }

2. 修改app.component.ts的数据结构，新增选中状态存储：

export class AppComponent {
  data = [
    { name: 'tea', checked: false },
    { name: 'coffee', checked: false },
    { name: 'soda', checked: false }
  ];

  public myFunction() {
    this.data.forEach(item => item.checked = false);
  }
}

3. 修改app.component.html的模板，绑定选中状态：

<ul>
  <li *ngFor="let d of data">
    <input type="checkbox" class="checkbox" [(ngModel)]="d.checked" />
    {{ d.name }}
  </li>
</ul>

<button (click)="myFunction()">Clear Checkbox</button>

快速兼容方案（不改动现有数据结构） #

如果不想调整原有数据结构，也可以通过类选择器批量操作DOM实现清空：
修改app.component.ts的myFunction逻辑即可：

export class AppComponent {
  data = ['tea', 'coffe', 'soda'];
  public myFunction() {
    const allCheckboxes = document.querySelectorAll<HTMLInputElement>('.checkbox');
    allCheckboxes.forEach(checkbox => checkbox.checked = false);
  }
}

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