How to unchecked all checked checkbox in angular 6

问题

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>

回答1:

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.

回答2:

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>

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

回答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)
  }

来源：https://stackoverflow.com/questions/55914612/how-to-unchecked-all-checked-checkbox-in-angular-6

标签

javascript

html

angular

typescript

checkbox