使用复选框从数组中添加和删除对象

Question

我已经在 React Native 的屏幕上实现了复选框，我想要实现的是，在选择复选框时，它将将该对象添加到数组中，并在取消选中时将其从数组中删除。我曾尝试使用过滤器方法和循环，但它不能按照要求的方式工作。for (let i = 0; i<tmp.length; i++){    console.log("length",tmp.length)    if(tmp.id == item.id){        tmp.splice(tmp.indexOf(item.id),1);        // tmp.pop(item)        console.log("POP")    }    else {        tmp.push(item);            console.log("PUSH")    }}我的对象数组如下：contacts:[    {name:'a', id:1, plant:3},    {name:'b', id:2, plant:1},    {name:'c', id:3, plant:1}],复选框代码：<CheckBox    checked={this.state.selectedCheckList.includes(item.id)? true:false}    onPress={()=>this.onCheckboxPress(item)} color={"#8BC63E"}/>我希望我在其中创建的数组tmp是动态的，这样可以从数组中删除和添加整个特定对象。前：tmp:[    {name:'a', id:1, plant:3},    {name:'b', id:2, plant:1},    {name:'c', id:3, plant:1}],后：tmp:[    {name:'a', id:1, plant:3},    {name:'c', id:3, plant:1}],

Answer 1

Try this::

var arr=[];

function change(checkbox)

{

  if(checkbox.checked == true)

  {

    arr.push(checkbox.value);

  }

  else

  {

     var j = arr.indexOf(checkbox.value);

     arr.splice(j, 1);

  }

  

  var stringArr=arr.join(',');

  document.getElementById('display').innerHTML=stringArr;

}

<div>

  <label>

    <input type="checkbox" name="check" value="Check 1" onchange="change(this)">A</label>

  <label>

    <input type="checkbox" name="check" value="Check 2" onchange="change(this)">B</label>

  <label>

    <input type="checkbox" name="check" value="Check 3" onchange="change(this)">C</label>

  <label>

    <input type="checkbox" name="check" value="Check 4" onchange="change(this)">D</label>

</div>

<div id="display">

</div>