javascript - 无法使用 html 表中的主复选框全选/取消全选

问题描述

我在下面分享了我的 html 和 ts 代码，在这里我可以选择和取消选择表中的多行，但问题是我不知道如何使用主复选框 SELECTALL/DESELECTALL

我的代码在以下网址中复制https://stackblitz.com/edit/angular-ivy-bbx9jh?file=src/app/app.component.ts

HTML

<div class="card-body">
<div class="table-responsive">
  <table  class="table">
      <thead class=" text-primary">
          <th>
             <input type="checkbox">
          </th>
          <th>
             Product Name
          </th>
          <th>
              Cost
          </th>
          <!-- <th>
              City
          </th>
          <th>
              Salary
          </th> -->
      </thead>
      <tbody>

          <tr *ngFor = "let data of productDataMultipleValue; let j = index;">
              <td>  
                <span style="padding-left:20px;
              ">             
          <input type="checkbox" [checked]="data.checker" 
    (change)="checkboxMultiplier(data,$event,j)"></span></td>
              <td >
                  <span style="padding-left:140px;
              ">{{data.namer}}</span>
              </td>
              <td>
                  <span style="padding-left:40px;
              ">{{data.coster}}</span>
              </td>
              <!-- <td>
                  {{}}
              </td>
              <td class="text-primary">
                 {{}}
              </td> -->
          </tr>

      </tbody>
      </table>
   </div>
   </div>

现在您可以在下面找到我的代码的 Typescript 部分

saveMultiRows: any = [];
productDataMultipleValue: any = [
{"id":1,"namer":"wires","coster":25},
{"id":1,"namer":"pipes","coster":40},
{"id":1,"namer":"motors","coster":67},
{"id":1,"namer":"lights","coster":78},
{"id":1,"namer":"switches","coster":86}
]


checkboxMultiplier(rowObj: any,event: any,rowIndex: any) {


let temp = 
  {  "namer":rowObj.namer,
  "coster" : rowObj.coster}

  if (event.target.checked == true) {

 
   this.saveMultiRows.push(temp);

    } else if (event.target.checked == false) {

    for (let j = 0; j < this.saveMultiRows.length; j++ ){
    if (this.saveMultiRows[j].coster == rowObj.coster) {
      this.saveMultiRows.splice(j,1);
    }
    }     
    }

console.log(this.saveMultiRows);

}

我的代码在以下网址中复制 https://stackblitz.com/edit/angular-ivy-bbx9jh?file=src/app/app.component.ts

标签： javascripthtmlcsstypescript

javascript - 无法使用 html 表中的主复选框全选/取消全选

问题描述

解决方案

推荐阅读