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

【问题标题】：Unable to Selectall/Deselectall using master checkbox in html table无法使用 html 表中的主复选框全选/取消全选
【发布时间】：2021-07-31 15:09:45
【问题描述】：

我在下面分享了我的 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

【问题讨论】：

标签： javascript html css typescript

【解决方案1】：

感谢您提供 stackblitz 链接。

我对您的代码进行了一些调整，您可以在下面的链接中查看它

https://stackblitz.com/edit/angular-ivy-b6o69x?file=src%2Fapp%2Fapp.component.html

我希望这就是你要找的。p>

【讨论】：

谢谢，它有效，但我面临一个小问题，即在使用主复选框选择所有复选框后，当我取消选择它时会删除整行
现在可以正常工作，满足所有条件，谢谢

【解决方案2】：

理论上，您需要做的是，将onclick EventListener 添加到最顶部的复选框（您将用于全选/取消全选的复选框），然后，伪代码类似于：

onclick 最上面的复选框，
使用 jQuery $("input:checkbox") 和选择所有复选框
将最顶层复选框的isChecked属性设置为所有复选框

我不熟悉TypeScript，但这是JavaScript and jQuery的方式

$("#topCheckbox").click(function(){
    $('input:checkbox').not(this).prop('checked', this.checked);
});

我假设您会将id=topCheckbox 添加到您用于全选/取消全选的主复选框中

【讨论】：

我没用过jquery，我试试，谢谢