Javascript 在复选框的更改事件中添加和删除数组中的值

在我的angular应用程序中，我创建了一个复选框并捕获复选框更改事件，并将选中的值推送到数组中

在这里，如果我们取消选中复选框，obj也会被推送到数组中

如果取消选中该复选框，如何从数组中删除对象

Html:

我用上面的链接解决了这个问题

---

请帮助我删除“`newArray````中未检查的值。…

将索引与对象一起传递，如果检查状态为false，则从数组中删除if

//Checkbox Change detecting function
 getCheckboxValues(data, index) {
    let obj = {
      "order" : data
    }

    if(!data.Checked){
       this.newArray.splice(index, 1);
    }
    else{

      // Pushing the object into array
      this.newArray.push(obj);
    }


       //Duplicates the obj if we uncheck it
       //How to remove the value from array if we uncheck it
        console.log(this.newArray);
}

<input type="checkbox" [id]="item+i" [name]="item"[(ngModel)]="item.Checked" (change)="getCheckboxValues(item, i)">

//复选框更改检测功能
getCheckboxValues（数据、索引）{
设obj={
“订单”：数据
}
如果（！data.Checked）{
this.newArray.splice（索引，1）；
}
否则{
//将对象推入数组
this.newArray.push（obj）；
}
//如果取消选中，则复制obj
//如果取消选中，如何从数组中删除该值
console.log（this.newArray）；
}

尝试以下代码：

HTML中的更改：

(ngModelChange)="getCheckboxValues($event,item)"  // use ndModelChange event

在TS中：

getCheckboxValues(event, data) {

    // use findIndex method to find the index of checked or unchecked item
    var index = this.newArray.findIndex(x => x.order==data);

    // If checked then push 
    if (event) {
       let obj = {
        "order": data
    }
      // Pushing the object into array
      this.newArray.push(obj);
    }
    else {
      this.newArray.splice(index, 1);
    }
    //Duplicates the obj if we uncheck it
    //How to remove the value from array if we uncheck it
    console.log(this.newArray);
  }
}

工作

您可以阅读有关

findIndex

和

indexOf

方法的内容

更改为

（ngModelChange）=“getCheckboxValues（$event，item）”

以及根据复选框的选中和取消选中来添加（如果不存在）和删除（如果元素存在）的函数

  //Checkbox Change detecting function
  getCheckboxValues(ev, data) {
    let obj = {
      "order" : data
    }

    if(ev.target.checked){
      // Pushing the object into array
      this.newArray.push(obj);

    }else {
      let removeIndex = this.newArray.findIndex(itm => itm.order===data);

      if(removeIndex !== -1)
        this.newArray.splice(removeIndex,1);
    }

    //Duplicates the obj if we uncheck it
    //How to remove the value from array if we uncheck it
    console.log(this.newArray);
  }

---

Link

如果我使用上述代码（选中和取消选中复选框），我在console.log（this.newArray）中得到的是空数组。。你能用上面的解决方案进行stackblitz吗？我认为你应该在推的同时使用索引。因为如果我先单击第三个复选框，它将位于位置0。检查一下。可能是失踪的人piece@undefined为什么不修改

数组

命名顺序就不可能？？您已经完全修改了数组的顺序。。我不能修改它。。我希望您知道，这些价值观将来自服务。。为了更好地理解，我已经硬编码了这些。请正确地检查你的例子。。。如果我检查所有四个并删除

三个

，但数组已删除最后一个值

四个

，而不是

三个

。@未定义让我检查仍然是这样的，只是请彻底检查一下如果您检查所有四个并取消选中

三个

，会发生什么情况。@undefined是的，收到了。。。要查看我的更新答案，请使用@undefined方法查找特定项目的索引使用ReactiveForm此链接将有助于@Chellappan，为什么兄弟我们不能这样实现？？因为我不打算使用表单，我需要单独存储checked的值。@Chellappan，如果使用反应表单很好，那么请将其发布为解决方案bro.，我将检查它。.是否最好使用find+indexOf？这一点很好。我记得findIndex的用法是find+indexOf

getCheckboxValues(event, data) {

    // use findIndex method to find the index of checked or unchecked item
    var index = this.newArray.findIndex(x => x.order==data);

    // If checked then push 
    if (event) {
       let obj = {
        "order": data
    }
      // Pushing the object into array
      this.newArray.push(obj);
    }
    else {
      this.newArray.splice(index, 1);
    }
    //Duplicates the obj if we uncheck it
    //How to remove the value from array if we uncheck it
    console.log(this.newArray);
  }
}

  //Checkbox Change detecting function
  getCheckboxValues(ev, data) {
    let obj = {
      "order" : data
    }

    if(ev.target.checked){
      // Pushing the object into array
      this.newArray.push(obj);

    }else {
      let removeIndex = this.newArray.findIndex(itm => itm.order===data);

      if(removeIndex !== -1)
        this.newArray.splice(removeIndex,1);
    }

    //Duplicates the obj if we uncheck it
    //How to remove the value from array if we uncheck it
    console.log(this.newArray);
  }