javascript - 如何在不重新索引数组键的情况下在 JQuery 中添加和删除数组

Question

当我点击任何复选框而不是主数组中的新数组追加(推送)时，我有一个复选框列表。如果取消选中而不是删除但不更改当前数组的任何索引。

解释:-

喜欢:- 当我点击数组中的第一个复选框时喜欢

0: ["2"]

喜欢:- 当我点击第二个复选框而不是数组时

0: ["2"]
1: ["3"]

喜欢 :- 当我点击四个复选框而不是数组时喜欢

0: ["2"]
1: ["3"]
2: ["5"]

如果我首先取消选中我需要的数组，那么在取消选中复选框之后

1: ["3"]
2: ["5"]

我再次点击第一个复选框而不是需要数组链接

1: ["3"]
2: ["5"]
3: ["2"]

不需要改变任何数组索引键

https://jsfiddle.net/tx63yjhg/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="1" />
<input type="checkbox" value="2" />
<input type="checkbox" value="3" />
<input type="checkbox" value="4" />
<input type="checkbox" value="5" />
<input type="checkbox" value="6" />
<input type="checkbox" value="7" />

<script type="text/javascript">
var values = [];
var new_value = [];

$("input").on("change", function() 
{
  var $this = $(this);
  
  if ($this.is(":checked")) 
  {
  	var new_data = [$this.val()];
  	new_value.push(new_data);
  }
  else 
  {	
  	//remove array when uncheck checkbox
  }
  console.log('new_value',new_value);
});
</script>

如何删除数组并重新添加？

Answer 1

我不确定您是否使用数组数组实现了相同的效果。您可以改为尝试使用如下所示的对象。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="1" />
<input type="checkbox" value="2" />
<input type="checkbox" value="3" />
<input type="checkbox" value="4" />
<input type="checkbox" value="5" />
<input type="checkbox" value="6" />
<input type="checkbox" value="7" />

<script type="text/javascript">
var values = [];
var new_value = {};
var counter = 0;

$("input").on("change", function() {
  var $this = $(this);
  
  if ($this.is(":checked")) {
    new_value[counter++] = [$this.val()];
  } else {	
    Object.entries(new_value).forEach(([k,v]) => {
      if(v.includes($this.val())) delete new_value[k];
    });
  }
  console.log('new_value',new_value);
});
</script>

编辑

添加

new_value[counter++] = {id1: 100, id2: 200, "id3": 300,"value":474}; // e.g. object

删除

let valueToBeRemoved = 234; // e.g. value to be removed

Object.entries(new_value).forEach(([k,v]) => {
  if(v.value === valueToBeRemoved) delete new_value[k];
})

编辑 2

for (var k in new_value) {
    if(new_value[k].value === valueToBeRemoved) delete new_value[k];
}