javascript - How to unchecked all checked checkbox in angular 6 - Stack Overflow

admin管理员组

文章数量:1287523

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>

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>

• javascript
• html
• angular
• typescript
• checkbox

Share Improve this question Follow edited Apr 30, 2019 at 5:58 JossFD 2,21611 gold badge99 silver badges2727 bronze badges asked Apr 30, 2019 at 5:45 monirmonir 4722 gold badges22 silver badges1111 bronze badges 3

• If you use angular reactive forms, loop over all the checkbox controls and unset the value. – karthik_varma_k Commented Apr 30, 2019 at 6:01
• There are two approaches for this. Either modify your data and add a property that you'll bind to the checked property. Or use template variable for your checkboxes and access them in your .ts file. I believe both options have been mentioned in the answers. Just choose the one you're fortable with! – JossFD Commented Apr 30, 2019 at 6:04
• @monir, Why not use [(ngModel)] it's more easy, see my answer – Eliseo Commented Apr 30, 2019 at 7:20

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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 ponent 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

Here is the link https://stackblitz./edit/angular-me1cdb?file=src/app/app.ponent.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>

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.

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

本文标签： javascriptHow to unchecked all checked checkbox in angular 6Stack Overflow