Html 选中同名的所有复选框

我。我想做的是，当我按下

所有非交易

，所有的检查

a，b，c，d都要检查。与
所有交易
相同，我希望
aa、bb、cc、dd
全部检查

我如何处理这种情况？谢谢你抽出时间
 您需要一个对象数组而不是字符串数组来保存选中复选框的记录：

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

最后，对于模板中的属性绑定，您必须将
值
更改为
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>


所有非贸易
{{ntrd.label}


各行各业
{{trd.label}

这是给你的裁判的一封信