Javascript 无法在html表中使用主复选框选择全部/取消全部

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

我的代码复制在下面的url中

HTML

品名
费用
{{data.namer}
{{data.coster}}

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

TS

saveMultiRows:any=[]；
productDataMultipleValue:任意=[
{“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（行对象：任意、事件：任意、行索引：任意）{
设温度=
{“namer”：rowObj.namer，
“coster”：rowObj.coster}
if（event.target.checked==true）{
这个.saveMultiRows.push（temp）；
}else if（event.target.checked==false）{
for（设j=0；j

}

我的代码复制在下面的url中

---

感谢您提供stackblitz链接

我对你的代码做了一些调整，你可以在下面的链接中查看

---

我希望这就是您想要的。

理论上，您需要做的是，在最上面的复选框中添加一个

onclick EventListener

（用于全选/全选的复选框），然后，伪代码类似于：

• onclick

  top复选框
• 使用jQuery

  $（“输入：复选框”）

  选择所有复选框，然后
• 将最顶端复选框的

  isChecked

  属性设置为所有复选框

我不熟悉

TypeScript

，但是

JavaScript和jQuery就是这样做的

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

我假设您会将
id=topCheckbox
添加到主复选框中，您正在使用该复选框选择/取消选择所有复选框
谢谢，它可以工作，但我面临一个小问题，即使用主复选框选择所有复选框后，当我取消选择它时，它会删除整行。它现在工作正常，满足所有条件。谢谢。我没有使用jquery，我会尝试一下，谢谢
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);

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