How to Select All the Checkboxes in Angular 6

how to select all checkboxes in angular 6?

Prepared a small demo to show how this can be done using ngModel directive. Link: https://stackblitz.com/edit/angular-lxjrdh

It uses Array.every to check if all are checked or not. If checked, it resets all otherwise checks all.

How to select multiple checkboxes in angular 6

use toString() method on sdata.

you will get desired result

Angular 6 + Bootstrap 4 Select all and Deselect all Checkboxes

this should do it

Here is a plnkr: https://next.plnkr.co/edit/ypGmwE32Xn1bgbqd?preview

HTML:

<div class="form-check">
    <input class="form-check-input" type="checkbox" (change)="selectAll()" [checked]="selectedAll">
    <label class="form-check-label">
        Select All
      </label>
</div>
<div class="form-check" *ngFor="let n of names">
    <input class="form-check-input" type="checkbox" value="{{n.name}}" [(ngModel)]="n.selected" (change)="checkIfAllSelected()">
    <label class="form-check-label">
        {{n.name}}
      </label>
</div>

TS:

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

@Component({
  selector: 'app-checkbox',
  templateUrl: './checkbox.component.html',
  styleUrls: ['./checkbox.component.scss']
})
export class CheckboxComponent implements OnInit {


    title = 'Checkbox';
  names: any;
  selectedAll: any;
  selectedNames: any;
    constructor() {
          this.title = "Select all/Deselect all checkbox - Angular 2";
    this.names = [
      { name: 'Prashobh', selected: false },
      { name: 'Abraham', selected: false },
      { name: 'Anil', selected: false },
      { name: 'Sam', selected: false },
      { name: 'Natasha', selected: false },
      { name: 'Marry', selected: false },
      { name: 'Zian', selected: false },
      { name: 'karan', selected: false },
    ]
    }
    selectAll() {
        this.selectedAll = !this.selectedAll;

        for (var i = 0; i < this.names.length; i++) {
            this.names[i].selected = this.selectedAll;
        } 
  }
  checkIfAllSelected() {
      var totalSelected =  0;
      for (var i = 0; i < this.names.length; i++) {
            if(this.names[i].selected) totalSelected++;
        } 
    this.selectedAll = totalSelected === this.names.length;

  return true;
  }

  ngOnInit() {
  }
}

Angular - Check/Uncheck All Checkboxes

Updating my answer as per our discussion in comments, to check/uncheck all checkboxes.

component.ts

checklist

checkUncheckAll(evt) {
  this.checklist.forEach((c) => c.isSelected = evt.target.checked)
}

ngOnInit() {
this.checklist = [
    {id:1,value:'Elenor Anderson',isSelected:false},
    {id:2,value:'Caden Kunze',isSelected:false},
    {id:3,value:'Ms. Hortense Zulauf',isSelected:false},
    {id:4,value:'Grady Reichert',isSelected:false},
    {id:5,value:'Dejon Olson',isSelected:false},
    {id:6,value:'Jamir Pfannerstill',isSelected:false},
    {id:7,value:'Aracely Renner DVM',isSelected:false},
    {id:8,value:'Genoveva Luettgen',isSelected:false}
  ];
}

In your template

<div class="container">
  <div class="text-center mt-5">
    <div class="row">
       <div class="col-md-6">
        <ul class="list-group">
            <li class="list-group-item">
              <input type="checkbox" name="list_name" value="m1" (change)="checkUncheckAll($event)"/> <strong>Select/ Unselect All</strong>
            </li>
          </ul>
          <ul class="list-group">
            <li class="list-group-item" *ngFor="let item of checklist">
              <input type="checkbox" [checked]="item.isSelected" name="list_name" value="{{item.id}}"/>
              {{item.value}}
            </li>
          </ul>
      </div>
   </div>
 </div>
</div>

Working DEMO

How to select all checkboxes in Angular with ngFor and ngIf?

Each m in mesesSiembra will need to have a boolean property representing the checked state of the checkbox and bind it with [checked]="m.checked" and (click)="m.checked = !m.checked". You will also needto have a unique name for each form element so use the index to make the name unique [name]="'mes_' + i".

To check them all you have a function that does

this.mesesSiembra = this.mesesSiembra.map(m => ({ ...m, checked: true }));

Here is a demo https://stackblitz.com/edit/angular-ivy-ibqzjj?file=src%2Fapp%2Fapp.component.html

All the checkbox is selected in angular 6

The three checkboxes are binded to the same model:

[(ngModel)]="processAnexOne.documentList"

Select all items in a checkbox Angular

A quick, possible solution.

First, you split the ngModel double binding and create an handler:

...
<input type="checkbox" value="Select All" [(ngModel)]="selectAllItems" (change)="selectAllLineItem($event)">
...
<input class="form-check input 
    [ngModel]="putAwayPurchaseOrderListDetailsData[i].checked"
    (ngModelChange)="onItemChange(i, $event)"
    type="checkbox" >

In the component ts:

// new property:
selectAllItems: boolean = false;
...
onItemChange(itemIdx: number, isChecked: boolean) {
  this.putAwayPurchaseOrderListDetailsData[itemIdx].checked = isChecked;
  // doesn't if selectAllItems is already false.
  if (!isChecked) this.selectAllItems = false;
}

It should be enough.

How to unchecked all checked checkbox in angular 6

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.

---

Related Topics