Use function for all selected checkboxes

Question

I ran into some problems with using a JavaScript function for all selected checkboxes. Here's how it looks:

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

Then I have this:

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

Now, the problem I have is that if I select multiple items 1 by 1, everything works great. However, if I select them all with the selectall checkbox, the function doesn't work any more. I mean, it's not applied to the selected items.

The strange thing is that if I select them all and then deselect some of them, the function is applied to the unchecked items. It acts as if it tracks the clicks, but I am using onChange. Any ideas?

Answer 1

The main problem is changing the checked property value programatically won't fire the change event so when you use the check all, checkedProducts array won't get updated.

But since you are using jQuery try a complete jQuery solution, so change your markup like

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

and

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

then

$('#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;
        }
    });
}