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

Posted 2023-05-08

【中文标题】根据复选框检查从另一个数组中删除数组

【英文标题】：Removing array from another array based on checkbox check

【发布时间】：2017-12-31 11:32:59

【问题描述】：

我有一个 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中所示

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

【问题讨论】：

您是不是在单击复选框时将复选框的值添加到数组中，然后在取消选中时将其删除？

@GrahamS。我将与选中行对应的 stname 和 stid 值保存到数组中。

很酷，您最终会尝试将所有检查的数据发送到服务器，对吧？

@GrahamS..是的。在取消选中时，如果已添加（已选中），我想删除与该行对应的数据。

【参考方案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>

【参考方案2】：

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

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

尝试在 HTML 中重命名为“checkCheckBoxForOperations”而不是“checkBoxForOperations”。

【参考方案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];
    

【讨论】：

..我不能将任何键作为标识符分配给数组，因为 stid 和 stname 都不是唯一的。