对所有选中的复选框使用函数

Question

我运行遇到了对所有 selected 复选框使用 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>

现在，我遇到的问题是，如果我 select 多个项目 1 对 1，一切都很好。但是，如果我 select 它们都带有 selectall 复选框，该功能将不再起作用。我的意思是，它不适用于 selected 项目。

st运行ge 的事情是，如果我 select 全部然后 deselect 其中一些，该功能将应用于未选中的项目。它就像跟踪点击一样，但我使用的是 onChange。有什么想法吗？

Answer 1

主要问题是以编程方式更改检查的属性值不会触发更改事件，因此当您使用检查全部时，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;
        }
    });
}

对所有选中的复选框使用函数

Use function for all selected checkboxes

javascript

checkbox

function

selected