根据复选框检查从另一个数组中删除数组

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
    }, {})    
}

取消选中我想删除与该未选中行对应的元素（作为数组添加）。我指的是answer。但该数组并未从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

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

index.html:41 Uncaught ReferenceError: checkBoxForOperations 未定义 在 HTMLInputElement.onclick

尝试在 HTML 中重命名为“checkCheckBoxForOperations”而不是“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];
    }