根据复选框检查从另一个阵列中删除阵列

Question

我有一个html表格，每行都有复选框。选中每个复选框时，我将行值推送到名为checkboxArrayForOperations的数组。

.HTML

<table>
<?php
$i = 0;
foreach ($databaseValue as $stValue) {
$i++;
?>
<tr>
<input type="text" id="stName<?php echo $i;?>" value="<?php echo $stValue['stName'];?>">
<input type="text" id="stId<?php echo $i;?>" value="<?php echo $stValue[0]['stId'];?>">
<td><input type="checkbox" class="checkboxForOperations" value="<?php echo $i;?>" onclick="checkBoxForOperations(this)"></td>
</tr>
<?php
}
?>
</table>

.JS

var checkboxArrayForOperations = []; // global array
function checkBoxForOperations(obj){
var checkboxValue =  obj.value;
if(obj.checked) {
checkboxArray = [];
checkboxArray["stName"] = $('#stName'+checkboxValue).val();
checkboxArray["stId"] = $('#stId'+checkboxValue).val();
checkboxArrayForOperations.push(checkboxArray);
} else {
var itemArrayForRemoval = [];
itemArrayForRemoval["stName"] = $('#stName'+checkboxValue).val();
itemArrayForRemoval["stId"] = $('#stId'+checkboxValue).val();
var indexItemArrayForRemoval = index(itemArrayForRemoval);
checkboxArrayForOperations = checkboxArrayForOperations.filter( function( el ) {
return !(JSON.stringify(el) in itemArrayForRemoval);
} );
}
console.log(checkboxArrayForOperations);
} 
function index(arr) {
return arr.reduce(function(acc, item){
return acc[JSON.stringify(item)] = item, acc
}, {})    
}

取消选中时，我想删除与该未选中的行相对应的元素(作为数组添加(。我指的是这个答案。但是阵列没有从checkboxArrayForOperations中删除。数组在 JSFiddle 中如下所示

我做错了什么？谁能帮我解决这个问题。提前谢谢。

Answer 1

如果可能的话，我建议更改表格格式。此外，你没有数组数组，所以我建议你考虑一个对象数组。

一个可能的解决方案可能是：

var checkboxArrayForOperations = []; // global array
function checkCheckBoxForOperations(obj) {
var checkboxValue = obj.value;
if (obj.checked) {
checkboxArray = [];
checkboxArrayForOperations.push({"stName":  $('#stName' + checkboxValue).val(),
"stId": $('#stId' + checkboxValue).val()});
} else {
var itemArrayForRemoval = {"stName":  $('#stName' + checkboxValue).val(),
"stId": $('#stId' + checkboxValue).val()};
checkboxArrayForOperations = checkboxArrayForOperations.filter(function (el, index) {
return JSON.stringify(el) != JSON.stringify(itemArrayForRemoval);
});
}
console.log(checkboxArrayForOperations);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<input type="text" id="stName1" value="1">
</td>
<td>
<input type="text" id="stId1" value="1">
</td>
<td><input type="checkbox" class="checkboxForOperations" value="1" onclick="checkCheckBoxForOperations(this)"></td>
</tr>
<tr>
<td>
<input type="text" id="stName2" value="2">
</td>
<td>
<input type="text" id="stId2" value="2">
</td>
<td><input type="checkbox" class="checkboxForOperations" value="2" onclick="checkCheckBoxForOperations(this)"></td>
</tr>
<tr>
<td>
<input type="text" id="stName3" value="3">
</td>
<td>
<input type="text" id="stId3" value="3">
</td>
<td><input type="checkbox" class="checkboxForOperations" value="3" onclick="checkCheckBoxForOperations(this)"></td>
</tr>
</tbody>
</table>

Answer 2

您是否在控制台中查看了可能出现的问题，我可以看到：

索引.html：41 未捕获的引用错误：未定义复选框操作 at HTMLInputElement.onclick

尝试在 HTML 中重命名为"checkBoxForOperations"而不是"checkBoxForOperations"。

Answer 3

您可以使用对象文字而不是数组来分配键作为标识符以删除项目：

var checkboxArrayForOperations = {}; // global object
function checkBoxForOperations(obj){
var checkboxValue =  obj.value;
if(obj.checked) {
var checkboxArray = {};
checkboxArray["stName"] = $('#stName'+checkboxValue).val();
checkboxArray["stId"] = $('#stId'+checkboxValue).val();
checkboxArrayForOperations["stId"] = checkboxArray;
} else {
var itemArrayForRemoval = $('#stId'+checkboxValue).val();
if(checkboxArrayForOperations.hasOwnProperty(itemArrayForRemoval)){
delete checkboxArrayForOperations[itemArrayForRemoval];
}    
}
} 

如果你仍然需要数组中的值，你可以使用以下代码：

var finalArray = [];
for(var i in checkboxArrayForOperations){
finalArray[finalArray.length] = checkboxArrayForOperations[i];
}