Checkbox counter for div-CodePudding

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 >
    <div  (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   (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 is checked then the divCounter = divCounter 1 and if checkbox from div is selected then divCounter increments itself. Basically an outer counter which gives me a count of active divs in this process.

CodePudding user response：

Get the divs, then get their checked checkboxes

document.querySelectorAll("div").forEach(function(div) {
  div.setAttribute("checkedBoxes", div.querySelectorAll("input[type=checkbox]:checked").length);
});

CodePudding user response：

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');
  }