div 的复选框计数器

Question

我需要在每个 div 中添加三个带有多个复选框的 div。我实现了向 individual divs 中选择的复选框添加计数器。我想添加一个计数器来记录选中复选框的 div 秒。

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 {

  }

}

我想添加一个计数器，如果 div class="firstCheckbox" 的复选框被选中，那么 div Counter = divCounter+1 如果选中 div class="secondCheckbox" 中的复选框，则 divCounter 会自行递增。基本上是一个外部计数器，它给我一个在此过程中活动的 divs 的计数。

Answer 1

获取 div，然后获取其选中的复选框

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

Answer 2

你的代码可以重构和优化，但我不打算讨论这个。将有多种方法来实现你想要的，我会给你我想到的最快的一个。您可以使用 Set 来存储唯一值

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

div 的复选框计数器

Checkbox counter for div

javascript

html

angular

counter