I need to add three divs with multiple checkboxes in each div. I achieved adding counter to checkboxes selected in individual divs. I want to add a counter that keeps count of divs in which the checkboxes are selected.
HTML code
<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>
Component.ts code
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 {
}
}
I want to add a counter such that if the checkbox from div class="firstCheckbox" is checked then the divCounter = divCounter+1 and if checkbox from div class="secondCheckbox" is selected then divCounter increments itself. Basically an outer counter which gives me a count of active divs in this process.
Get the divs, then get their checked checkboxes
document.querySelectorAll("div").forEach(function(div) {
div.setAttribute("checkedBoxes", div.querySelectorAll("input[type=checkbox]:checked").length);
});
You code can be refactored and optimized, but I am not going into this. There will be multiple ways to achieve what you want, I will give you the quickest one which is coming in my mind. You could use Set which stores the unique values
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');
}