Проверьте все флажки с тем же именем

Question

I У меня есть этот фрагмент . То, что я пытаюсь сделать, это когда я нажимаю All NonTrades, все проверки a, b, c, d должны быть проверены. То же самое с All Trades, я хочу, чтобы aa, bb, cc, dd был проверен.

Как я могу справиться с этой ситуацией? Спасибо за ваше время!

Answer 1

Вам понадобится массив Object вместо String Array, чтобы сохранить запись о том, какой флажок был установлен:

nontrade = [
  { label: 'a', selected: false }, 
  { label: 'b', selected: false }, 
  { label: 'c', selected: false }, 
  { label: 'd', selected: false }
];

trade = [
  { label: 'aa', selected: false }, 
  { label: 'bb', selected: false }, 
  { label: 'cc', selected: false }, 
  { label: 'dd', selected: false }
];

Затем, установив флажок «Все трейдеры» или «Все не трейдеры», вы можете внести изменения в методы allNonTrades и allTrades.

allNonTrades(event) {
  const checked = event.target.checked;
  this.nontrade.forEach(item => item.selected = checked);
}

allTrades(event) {
  const checked = event.target.checked;
  this.trade.forEach(item => item.selected = checked);
}

Наконец, вам нужно изменить value на checked для привязки атрибутов в вашем шаблоне:

<label class="btn btn-filter">
  <input type="checkbox" name="allNonTrades" [value]="nontrade" (change)="allNonTrades($event)">All NonTrades
</label>&nbsp;
<ng-container *ngFor="let ntrd of nontrade">
  <label class="btn btn-filter">
    <input type="checkbox" name="nontrades" [checked]="ntrd.selected" (change)="changeTradesByCategory($event)">{{ ntrd.label }}
  </label>&nbsp;
</ng-container>

<br>

<label class="btn btn-filter">
  <input type="checkbox" name="allTrades" [value]="trade" (change)="allTrades($event)">All Trades
</label>&nbsp;
<ng-container *ngFor="let trd of trade">
  <label class="btn btn-filter">
    <input type="checkbox" name="trades" [checked]="trd.selected" (change)="changeTradesByCategory($event)">{{ trd.label }}
  </label>&nbsp;
</ng-container>

Вот Рабочий StackBlitz для вашей ссылки.