casilla de verificación para seleccionar todas las casillas de verificación ejemplo de código angular

Es importante interpretar el código de forma correcta previamente a aplicarlo a tu proyecto si tdeseas aportar algo puedes decirlo en los comentarios.

Ejemplo 1: seleccione todas las casillas de verificación en angular

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.

Ejemplo 2: casilla de verificación para seleccionar todas las casillas de verificación angulares

import  Component  from '@angular/core';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
)
export class AppComponent 
  title = 'Angular 7 CheckBox Select/ Unselect All';
  masterSelected:boolean;
  checklist:any;
  checkedList:any;

  constructor()
      this.masterSelected = false;
      this.checklist = [
        id:1,value:'Elenor Anderson',isSelected:false,
        id:2,value:'Caden Kunze',isSelected:true,
        id:3,value:'Ms. Hortense Zulauf',isSelected:true,
        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
      ];
      this.getCheckedItemList();
  

  checkUncheckAll() 
    for (var i = 0; i < this.checklist.length; i++) 
      this.checklist[i].isSelected = this.masterSelected;
    
    this.getCheckedItemList();
  
  isAllSelected() 
    this.masterSelected = this.checklist.every(function(item:any) 
        return item.isSelected == true;
      )
    this.getCheckedItemList();
  

  getCheckedItemList()
    this.checkedList = [];
    for (var i = 0; i < this.checklist.length; i++) 
      if(this.checklist[i].isSelected)
      this.checkedList.push(this.checklist[i]);
    
    this.checkedList = JSON.stringify(this.checkedList);
  


Copy

Ejemplo 3: casilla de verificación para seleccionar todas las casillas de verificación angulares

<divstyle="text-align:center"><h1>
     title !
  h1>div><divclass="container"><divclass="text-center mt-5"><divclass="row"><divclass="col-md-6"><ulclass="list-group"><liclass="list-group-item"><inputtype="checkbox"[(ngModel)]="masterSelected"name="list_name"value="m1"(change)="checkUncheckAll()"/><strong>Select/ Unselect Allstrong>li>ul><ulclass="list-group"><liclass="list-group-item"*ngFor="let item of checklist"><inputtype="checkbox"[(ngModel)]="item.isSelected"name="list_name"value="item.id"(change)="isAllSelected()"/>
                  item.value
                li>ul>div><divclass="col-md-6"><code>checkedListcode>div>div>div>div>Copy

Comentarios y calificaciones del post

---

---

Utiliza Nuestro Buscador