Javascript 根据复选框值动态更改文本

使用

FormArray

我在我的组件上设置了绑定复选框，复选框的默认

label

为select，当我单击checbox时，

label

将更改为selected，用于每个复选框（假定为），我还得到了

selectAll

按钮，该按钮将所有复选框的值更改为

true

，并将文本更改为selected，我的问题是：

• 当我只选择一个复选框时，更改

  标签

  也会影响其他复选框
• 当我选中了

  selectAll

  复选框时，所有复选框标签都将更改为selected，如果我取消选中单个复选框，则应将

  label

  更改为select

这就是我曾经尝试过的：

html文件

<div *ngIf="isShowResponse">
    <p>Inquiry Response</p>
    <form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
        <ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index">
            <ng-container [formGroupName]="i">
                <input type="checkbox" formControlName="isChecked"
        (change)="checkedState(summon)">
            {{ summonText }}
           </ng-container>
       </ng-container>
   </form>
<!-- <pre>{{form.value | json}}</pre> -->
<button (click)="selectAll()">Select All</button>
</div>

<div *ngIf="isShowResponse">
<p>Inquiry Response</p>
<form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
    <ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index">
        <ng-container [formGroupName]="i">
            <input type="checkbox" [checked]="summon.checked" formControlName="isChecked"
    (change)="checkedState(summon)">
       {{ summon.checked === true ? 'selected' : 'select' }}
    </ng-container>
 </ng-container>
</form>
 <!-- <pre>{{form.value | json}}</pre> -->
<button (click)="selectAll()">Select All</button>
</div>

这是我的全部，我可以用一些建议和更好的实践来解决这个问题

询问答复

{{call.get（'isChecked'）.value？'selected'：'select'}
全选

---

我做了一些更改，您可以尝试以下方法：

HTML

<div *ngIf="isShowResponse">
<p>Inquiry Response</p>
<form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
    <ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index">
        <ng-container [formGroupName]="i">
            <input type="checkbox" [checked]="summon.checked" formControlName="isChecked"
    (change)="checkedState(summon)">
       {{ summon.checked === true ? 'selected' : 'select' }}
    </ng-container>
 </ng-container>
</form>
 <!-- <pre>{{form.value | json}}</pre> -->
<button (click)="selectAll()">Select All</button>
</div>

selectAll() {
 this.formReceivedSummons.controls.map((summon: any) => {
  summon.checked = true;
 });
}
checkedState(summon) {
 summon.checked = !summon.checked;
}