Question

我正在尝试验证与列表数据关联的复选框。我想检查列表中的所有复选框是否都被选中。

<li class="checkbox-wrap" *ngFor="let data of setupData">
    <span *ngFor="let groupdata of data.groupTypes">
         <span *ngFor="let servicedata of groupdata.printServices">
              <md-checkbox [checked]="selectAll" (click)="checkedService()">{{data.serviceCategoryDisplayName}} / {{groupdata.groupTypeDisplayName}} / {{servicedata.printServiceDisplayName}}</md-checkbox>
         </span>
       </span>
     </li>

请提出一种检查是否选中所有复选框的方法。

Answer 1

您可以为复选框提供ID，并带有循环索引：

<span *ngFor="let servicedata of groupdata.printServices; index as i">
          <md-checkbox id="id_{{i}}" [checked]="selectAll" (click)="checkedService()">{{data.serviceCategoryDisplayName}} / {{groupdata.groupTypeDisplayName}} / {{servicedata.printServiceDisplayName}}</md-checkbox>
</span>

要进行验证，您可以获取如下所示的值：

for(let item in this.data){
   var input = document.querySelector("#id_"+i);
   console.log(input.checked);
   i++;
}

您可以在这里进行测试： https://stackblitz.com/edit/angular-gf5zss?file=src%2Fapp%2Fapp.component.ts

如何验证复选框列表？

1 个答案: