Necesito agregar tres divs con múltiples casillas de verificación en cada div. Logré agregar un contador a las casillas de verificación seleccionadas en divs individuales. Quiero agregar un contador que cuente los divs en los que se seleccionan las casillas de verificación.
Código HTML
<div class="container"> <div class="firstCheckbox" (click)="dis2=true"> <div *ngFor ="let o of options" > <input [disabled]="dis1" type="checkbox" [(ngModel)]="o.checked" (ngModelChange)="changed()"> {{ o.name }} </div> <p>Total O-Items Checked :- {{count}}</p> </div> <div class="secondCheckbox" (click)="dis1=true" > <div *ngFor ="let p of options1" > <input [disabled]="dis2" type="checkbox" [(ngModel)]="p.checked" (ngModelChange)="changed1()"> {{ p.name }} </div> <p>Total P-Items Checked :- {{count1}}</p> </div>Código componente.ts
export class CheckComponent implements OnInit { count: number; count1: number; dis1:boolean; dis2:boolean; options : any = [ { id:0 , name : 'A' }, { id:1 , name : 'B' }, { id:2 , name : 'C' }, { id:3 , name : 'D' }, { id:4 , name : 'E' }, { id:5 , name : 'F' }, ]; options1 : any = [ { id:0 , name : 'A' }, { id:1 , name : 'B' }, { id:2 , name : 'C' }, { id:3 , name : 'D' }, { id:4 , name : 'E'}, { id:5 , name : 'F' }, ]; constructor() { } changed(){ this.count = 0; this.options.forEach(item => { if (item['checked']) { this.count = this.count + 1; } }) } changed1(){ this.count1 = 0; this.options1.forEach(item => { if (item['checked']) { this.count1 = this.count1 + 1; } }) } ngOnInit(): void { } }Quiero agregar un contador de modo que si la casilla de verificación de div class="firstCheckbox" está marcada, entonces divCounter = divCounter+1 y si la casilla de verificación de div class="secondCheckbox" está seleccionada, entonces divCounter se incrementa solo. Básicamente, un contador externo que me da un recuento de divs activos en este proceso.
Obtenga los divs, luego obtenga sus casillas de verificación marcadas
document.querySelectorAll("div").forEach(function(div) { div.setAttribute("checkedBoxes", div.querySelectorAll("input[type=checkbox]:checked").length); });Su código puede ser refactorizado y optimizado, pero no voy a entrar en esto. Habrá múltiples formas de lograr lo que quieres, te daré la más rápida que se me ocurra. Podría usar Set que almacena los valores únicos
get activeDivsCount: number{ return this.activeDivs.size; } activeDivs = new Set(); changed(){ this.count = 0; this.options.forEach(item => { if (item['checked']) { this.count = this.count + 1; } }); if(this.count > 0) this.activeDivs.add('div1'); else this.activeDivs.delete('div1'); } changed1(){ this.count1 = 0; this.options1.forEach(item => { if (item['checked']) { this.count1 = this.count1 + 1; } }); if(this.count1 > 0) this.activeDivs.add('div2'); else this.activeDivs.delete('div2'); }