Question

我在使用所有选中的复选框的JavaScript函数时遇到了一些问题。这是它的外观：

<script type="text/javascript">
    function toggle(source) {
        checkboxes = document.getElementsByName('checkbox');
        for(var i=0, n=checkboxes.length;i<n;i++) {
            checkboxes[i].checked = source.checked;
        }
    }
    function backToActive(id){     // for a single item
        $.ajax({
            type: "POST",
            url: '/backtoactive/'+id,
            success: function(){
                $("#line_"+id).hide(1000);  
            }
        });
    }
    function massiveBackToActive(){    // for multiple checked items
        var pids = checkedProducts.join();
        $.ajax({
            type: "POST",
            data: { ids : pids },
            url: '/massivebacktoactive/',
            success: function(){
                window.location.href = window.location.href;
            }
        });
    }
    function checkProduct(id){
        var a = checkedProducts.indexOf(id);
        if( a >= 0 ){
            checkedProducts.splice(a,1);
        }
        else{
            checkedProducts.push(id);
        }
    }
</script>

然后我有了这个：

<tr>
    <th>
        <input type="checkbox" onClick="toggle(this)" />
    </th>
    <th>img</th>
    <th>Name</th>
</tr>
<tr id="line_<?php echo $item->productid;?>">
    <td>
        <input type="checkbox" name="checkbox" onchange="checkProduct(<?php echo $item->productid;?>)" />
    </td>
    <td><a href="/item/?id=<?php echo $item->productid;?>" class="bold"><img src="<?php echo $item->imgurl;?>" /></a></td>
    <td><a target="_new" href="<?php echo $item->url;?>" class="bold"><?php echo $item->name;?></a></td>
</tr>

现在，我遇到的问题是如果我逐个选择多个项目，一切都很好。但是，如果我使用selectall复选框选中它们，则该功能不再起作用。我的意思是，它不适用于所选项目。

奇怪的是，如果我全部选择它们然后取消选择其中一些，则该功能将应用于未选中的项目。它就像跟踪点击一样，但我使用的是onChange。有什么想法吗？

Answer 1

主要问题是以编程方式更改checked属性值不会触发更改事件，因此当您使用check all时，checkedProducts数组将不会更新。

但是因为你正在使用jQuery尝试一个完整的jQuery解决方案，所以改变你的标记，如

<input type="checkbox" id="checkboxall" />

和

<input type="checkbox" name="checkbox" data-id="<?php echo $item->productid;?>" />

然后

$('#checkboxall').change(function () {
    $('input[name="checkbox"]')[this.checked ? 'not' : 'filter'](':checked').prop('checked', this.checked).change();
})

$('input[name="checkbox"]').change(function () {
    var id = $(this).data('id')
    if (this.checked) {
        checkedProducts.push(id);
    } else {
        var index = checkedProducts.indexOf(id);
        if (index > -1) {
            checkedProducts.splice(index, 1);
        }
    }

    console.log(checkedProducts)
})

function backToActive(id) { // for a single item
    $.ajax({
        type: "POST",
        url: '/backtoactive/' + id,
        success: function () {
            $("#line_" + id).hide(1000);
        }
    });
}

function massiveBackToActive() { // for multiple checked items
    var pids = checkedProducts.join();
    $.ajax({
        type: "POST",
        data: {
            ids: pids
        },
        url: '/massivebacktoactive/',
        success: function () {
            window.location.href = window.location.href;
        }
    });
}

使用所有选中复选框的功能

1 个答案: