如何取消选中角度6中的所有选中复选框答案

【问题标题】：How to unchecked all checked checkbox in angular 6如何取消选中角度6中的所有选中复选框
【发布时间】：2019-09-18 17:48:49
【问题描述】：

我有一个动态数据列表，每个元素都显示为一个复选框。我检查的元素保存在一个数组中。保存数组后，我希望在按下按钮时取消选中所有选中的复选框，但它不起作用。

我想在保存数组后取消选中选中的复选框。请帮我找到解决方案。谢谢。

Stackblitz link here

ts 文件：

export class AppComponent  {
 userRoleListTemp: any = [];
 userRoleListToSave: any = [];
 checkedInfo: any;

 appUserRoleList: any = [
    {id: '1', roleName: 'SETUP_ROLE'},
    {id: '2', roleName: 'ENTRY_ROLE'},
    {id: '3', roleName: 'SEATPLAN_ROLE'},
    {id: '4', roleName: 'MARKSENTRY_ROLE'},
    {id: '5', roleName: 'APPLICANT_ROLE'}
 ];

 constructor() {}

 onChangeRole(userRole: string, isChecked) {
    this.checkedInfo = isChecked;
    if (isChecked.target.checked) {
        this.userRoleListTemp.push(userRole);
    } else {
        let index = this.userRoleListTemp.indexOf(userRole);
        this.userRoleListTemp.splice(index, 1);
    }
  }

  checkedEvnt() {
    this.checkedInfo.target.checked = false;
  }

}

html 文件：

<h1>Unchek All Roles</h1>

 <div class="form-check" *ngFor="let appUserRole of appUserRoleList">

 <input class="form-check-input" name="{{appUserRole.roleName}}" 
   type="checkbox" id="{{appUserRole.roleName}}" 
   (change)="onChangeRole(appUserRole.roleName, $event)">

 <label class="form-check-label" for="{{appUserRole.roleName}}">
  {{appUserRole.roleName}}
 </label> 

</div>
<button (change)="checkedEvnt()">Uncheck All</button>

<pre>{{ userRoleListTemp | json}}</pre>

【问题讨论】：

如果您使用角度反应形式，请遍历所有复选框控件并取消设置值。
有两种方法。修改您的数据并添加一个您将绑定到checked 属性的属性。或者为您的复选框使用模板变量并在您的 .ts 文件中访问它们。我相信答案中都提到了这两种选择。选择你觉得舒服的就行了！
@monir，为什么不使用 [(ngModel)] 更简单，看我的回答

标签： javascript html angular typescript checkbox

【解决方案1】：

为什么不使用 [(ngModel)]??没有（改变），没有分裂。保持代码简单。见stackblitz

<div class="form-check" *ngFor="let appUserRole of appUserRoleList">

  <input #inputs class="form-check-input" name="{{appUserRole.roleName}}" type="checkbox" id="{{appUserRole.roleName}}" [(ngModel)]="appUserRole.checked">

  <label class="form-check-label" for="{{appUserRole.roleName}}">
      {{appUserRole.roleName}}
  </label> 

</div>

要获取数组，我喜欢getter

  get userRoleListTemp()
  {
    return this.appUserRoleList.filter(x=>x.checked).map(u=>+u.id)
  }

【讨论】：

【解决方案2】：

这里是链接https://stackblitz.com/edit/angular-me1cdb?file=src/app/app.component.html

我正在使用isChecked 标志它会帮助你

 appUserRoleList: any = [
        {id: '1', roleName: 'SETUP_ROLE',isChecked:false},
        {id: '2', roleName: 'ENTRY_ROLE',isChecked:false},
        {id: '3', roleName: 'SEATPLAN_ROLE',isChecked:false},
        {id: '4', roleName: 'MARKSENTRY_ROLE',isChecked:true},
        {id: '5', roleName: 'APPLICANT_ROLE',isChecked:false} 
    ];


    onChangeRole(userRole: string, isChecked) {
        this.checkedInfo = isChecked;
         for(var i=0;i<this.appUserRoleList.length;i++ ){
           if( this.appUserRoleList[i].roleName==userRole){

          this.appUserRoleList[i].isChecked=!this.appUserRoleList[i].isChecked;
           }
        }
    }

    checkedEvnt() {
        for(var i=0;i<this.appUserRoleList.length;i++ ){
          this.appUserRoleList[i].isChecked=false;
                    console.log(this.appUserRoleList[i].isChecked)

        }
    }

<h1>Unchek All Roles</h1>

<div class="form-check" *ngFor="let appUserRole of appUserRoleList">

  <input class="form-check-input" name="{{appUserRole.roleName}}" type="checkbox" id="{{appUserRole.roleName}}" [checked]="appUserRole.isChecked" (change)="onChangeRole(appUserRole.roleName, $event)">

  <label class="form-check-label" for="{{appUserRole.roleName}}">
      {{appUserRole.roleName}}
  </label> 

</div>

<button (click)="checkedEvnt()">Uncheck All</button>

<pre>{{ userRoleListTemp | json}}</pre>

【讨论】：

【解决方案3】：

使用模板变量来获取复选框：

<input #checkboxes class="form-check-input" name="{{appUserRole.roleName}}" type="checkbox" id="{{appUserRole.roleName}}" (change)="onChangeRole(appUserRole.roleName, $event)">

然后在您的组件中使用@ViewChild 获取所有ElementRef 并通过将checked 属性设置为false 来处理它们：

@ViewChildren("checkboxes") checkboxes: QueryList<ElementRef>
checkedEvnt() {
         this.checkboxes.forEach((element) => {
              element.nativeElement.checked = false;
              this.userRoleListTemp.length = 0;
    });
}

这是你修改后的StackBlitz

【讨论】：

【解决方案4】：

您犯的第一个错误是您在单击按钮时添加了(change) 事件。如果对于输入类型属性，请将其替换为 (click) 作为更改事件，并且您只能将其与 ngModel 一起使用。

您应该在appUserRoleList 列表中添加isChecked 属性，这将帮助您选中/取消选中复选框。试试这个：

  appUserRoleList: any = [
        {id: '1', roleName: 'SETUP_ROLE', isChecked: true},
        {id: '2', roleName: 'ENTRY_ROLE', isChecked: false},
        {id: '3', roleName: 'SEATPLAN_ROLE', isChecked: true},
        {id: '4', roleName: 'MARKSENTRY_ROLE', isChecked: true},
        {id: '5', roleName: 'APPLICANT_ROLE', isChecked: true}
    ];

在Uncheck All 按钮上单击循环通过appUserRoleList 并设置isChecked = false。

这是工作的example。

【讨论】：