How to Check Uncheck All Checkboxes in Angular?

To check uncheck all checkboxes in Angular, you can bind the [checked] property of each checkbox to a corresponding boolean flag in the ts file.

If the value of the [checked] property is set to true, the checkbox becomes checked and if it is set to false, the checkbox becomes unchecked.

That means if we want to make all checkboxes checked at once, we have to dynamically set their checked property to true, and to make them unchecked, we have to set it to false.

To keep track of the value of the checked property, we can bind it with some boolean flag in our ts file.

See the following example:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  data: any[] = [
    { id: 1, value: 'Check 1', isSelected: false },
    { id: 2, value: 'Check 2', isSelected: false },
    { id: 3, value: 'Check 3', isSelected: false },
    { id: 4, value: 'Check 4', isSelected: false },
    { id: 5, value: 'Check 5', isSelected: false },
    { id: 6, value: 'Check 6', isSelected: false },
    { id: 7, value: 'Check 7', isSelected: false },
    { id: 8, value: 'Check 8', isSelected: false },
  ];

  // To store all selected checkboxes data
  selectedCheckboxes: any[] = [];

  // Check or uncheck all checkboxes
  selectUnselectAll(event: any) {
    // Set isSelected flag to true if selectAll checkbox is checked
    // Otherwise set it to false
    for (let i = 0; i < this.data.length; i++) {

      // Check or uncheck
      this.data[i]['isSelected'] = event.target.checked;

    }

    // event.target.checked returns true if checkbox is checked
    // event.target.checked returns false if checkbox is unchecked
  }

  // Fires on single checkbox state change
  singleChange(event: any, id: any) {

    // Get the index of current checked/unchecked checkbox
    let idx = this.data.findIndex(item => item.id == id);

    // Set 'isSelected' flag to true or false based on
    // the current state of the checkbox
    this.data[idx]['isSelected'] = event.target.checked;

  }

  // Function to get all selected checkboxes
  getSelectedCheckboxes() {

    // Filter those checkboxes which has the 
    // isSelected flag set to true
    this.selectedCheckboxes = this.data.filter(check => check.isSelected);

    // Print the result
    console.log(this.selectedCheckboxes);

  }
}

Let’s next add the HTML:

<div style="padding: 40px;">
  <h2>Select All Checkboxes at Once</h2>

  <div>
    <input type="checkbox" name="selectAll" id="selectAll" (change)="selectUnselectAll($event)">
    <label for="selectAll">Select All</label>
  </div>

  <div class="checkbox-container">
    <div *ngFor="let checkbox of data">
      <input type="checkbox" name="myCheckbox" [checked]="checkbox.isSelected" (change)="singleChange($event, checkbox.id)">
      <label>{{checkbox.value}}</label> 
    </div>
  </div>

  <br>
  <button (click)="getSelectedCheckboxes()">Get Selected Checkboxes</button>

</div>

Output:

We have used three helper functions in this example:

1. selectUnselectAll()

This function is responsible to make all checkboxes checked or unchecked at once.

To do that, it iterates through the checkboxes array and sets the value of the isSelected flag to true or false based on the current state of the selectAll checkbox.

If the value of the event.target.checked is true, all checkboxes become checked, otherwise, they all become unchecked.

2. singleChange()

This function updates the value of the isSelected flag based on the current state of the checkbox.

It does this by first finding the index of the checkbox in the checkboxes array and then changing the value of the isSelected flag.

3. getSelectedCheckboxes()

This helper function filters those checkboxes from the checkboxes array that has the isSelected flag’s value set to true and prints in the console.

That’s all for this article. Thanks for reading!