我如何檢查angular5中的所有mat-checkbox？

Question

當我點擊check-all時我想要； check-1 、 check-2和check-3也被檢查。 我怎樣才能做到這一點？

<form>
    <mat-checkbox type="checkbox" class="select_all">
        Check all
    </mat-checkbox>
    <br>
    <mat-checkboxtype="checkbox" class="select_single">
        Check-1
    </mat-checkbox>
    <mat-checkbox type="checkbox" class="select_single">
        Check-2
    </mat-checkbox>
    <mat-checkbox type="checkbox" class="select_single">
        Check-3
    </mat-checkbox>
</form>

Answer 1

您可以利用mat-checkbox和 [checked] 輸入屬性的更改事件來實現檢查所有功能，如下所示：

HTML :

<mat-checkbox (change)="chkAllChange($event)" type="checkbox" class="select_all">Check all</mat-checkbox>
<br/>
<mat-checkbox type="checkbox" class="select_single" [checked]="chkArr[0]">Check-1</mat-checkbox>
<mat-checkbox type="checkbox" class="select_single" [checked]="chkArr[1]">Check-2</mat-checkbox>
<mat-checkbox type="checkbox" class="select_single" [checked]="chkArr[2]">Check-3</mat-checkbox>

TS :

chkArr:boolean[]=[false,false,false];

  chkAllChange(event:MatCheckboxChange){
    if(event.checked){
      this.chkArr = this.chkArr.map(m=>true);
    }
    else{
      this.chkArr = this.chkArr.map(m=>false);
    }
  }

演示在這里： https : //stackblitz.com/edit/angular-ngjvt8

Answer 2

你可以做這樣的事情。 在 html 中

<table class="table">
   <thead class="green-color">
      <tr>
         <th>
            <input type="checkbox" (change)="checkAll($event)">
         </th>
      </tr>
   </thead>
   <tbody>
      <tr *ngFor="let list of orders">
         <td>
            <input type="checkbox" value="{{list.number}}" [(ngModel)]="list.isChecked">
         </td>
      </tr>
   </tbody>
</table>

並在您的.ts文件中

checkAll(event) {
  this.orders.forEach(object => object.isChecked = event.target.checked);
 }

Answer 3

請檢查下面的 html 和 ts 片段以實現 select 全部或使用 mat-checkbox 取消全選

.html 文件

     <form>
    <ul>
        <mat-checkbox type="checkbox" class="select_all" (change)="handleAllSelections($event)">
            Check all
        </mat-checkbox>
        <br>
        <div *ngFor="let checkbox of checkBoxList">
            <mat-checkbox type="checkbox" class="select_single" [checked]="checkbox.selected">
                {{checkbox.name}}
            </mat-checkbox>
        </div>
    </ul>
</form>

.ts 文件

定義 checkBoxList 以避免 html 代碼中的重復行，並將 'handleAllSelections' function 添加到 select 或取消選擇所有復選框。

  checkBoxList = [
        {
          name: 'Check-1',
          selected: false
        },
        {
          name: 'Check-2',
          selected: false
        },
        {
          name: ' Check-3',
          selected: false
        }
      ];


 handleAllSelections(event: MatCheckboxChange) {
    if (event.checked) {
      this.checkBoxList.forEach(element => {
        element.selected = true;
      });
    } else {
      this.checkBoxList.forEach(element => {
        element.selected = false;
      });
    }
  }