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

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

可能的解决方案可能是：

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 2

您是否在控制台中查看了可能出错的内容，我可以看到：

index.html：41未捕获的ReferenceError：未定义checkBoxForOperations 在HTMLInputElement.onclick

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

Answer 3

您可以使用object literal而不是array来将键指定为标识符以删除项目：

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];
    }

基于复选框检查从另一个阵列中删除阵列

3 个答案: