如何取消选中Angular 6中所有选中的复选框

Question

I have a dynamic list of data, and each element is shown as a checkbox. The elements I checked are saved in an array. After I save the array, I want all the checked checkbox to be unchecked when I press a button, but it doesn't work.

I want to unchecked the selected checkbox after I saved the array. Please help me to find a solution. Thanks.

Stackblitz link here

ts file:

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 file:

<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>

Answer 1

Here is the link https://stackblitz.com/edit/angular-me1cdb?file=src/app/app.component.html

I am using isChecked flag it will help you

 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>

Answer 2

First mistake you made is you are adding (change) event on button click. Replace it with (click) as change event if for input type properties and you can only use it with ngModel .

You should add isChecked property inside appUserRoleList list, which will help you to check/uncheck checkbox. Try this:

  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}
    ];

On Uncheck All button click loop though the appUserRoleList and set isChecked = false .

Here is the working example .

Answer 3

Use a template variable to get a hold of the checkboxes:

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

Then in your component using @ViewChild get a hold of all the ElementRef and process them by setting the checked property to false :

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

This is your modified StackBlitz

Answer 4

why not use [(ngModel)]?? NO (change), NO split. Maintain the code simple. See 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>

To get the array, I like a getter

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