Question

I have table with a check-all checkbox in the header which checks all the checkboxes in that column of the table:

<input class="check-all" type="checkbox" id="masterCheck" />

However, on one of my pages I would like to automatically check the check-all checkbox on page load.

To do this I’ve attempted to fire a trigger(‘click’) function like the one below:

$(document).ready(function () {
    if ($("#masterCheck").attr('checked')) {
    } else {
        $("#masterCheck").trigger('click');
    }
});

This checks the checkbox fine, but doesn’t fire my custom click event for checkboxes with the class .check-all (below):

$(function () {
    $('.check-all').click(function () {
        $(this).parents('table:eq(0)').find(':checkbox').attr('checked', this.checked);
    });
});

I’ve also tried adding a Javascript setTimeout, thinking that the custom click function wasn’t being loaded quite yet, but it still didn’t fire the custom click function after waiting 1, 2, and 3 seconds.

Upon page load, I can then un-check my pre-checked checkbox and re-check it to check all of the checkboxes in the column perfectly.

Do I have to add something special to my jQuery on the Document.ready to allow it to fire the custom click event?

***EDIT1:

Ok, I’ve attempted to add the custom click event right above the document.ready function on my page to ensure it’s loaded (as the previous custom click event is in a master .js file used in my _Layout). In addition to this, I’ve changed the class of my checkbox to correspond with my new custom click event so I don’t conflict with the one in my master .js file.

<input class="check-allx" type="checkbox" id="masterCheck" />


// Check all checkboxes when the one in a table head is checked:
    $(function () { 
        $('.check-allx').click(function () {
            $(this).parents('table:eq(0)').find(':checkbox').attr('checked', this.checked);
            alert(this);
        });
    });
// Check for unchecked masterCheck
    $(document).ready(function () {
        if ($("#masterCheck").attr('checked')) {
        } else {
            //$("#masterCheck").trigger('click');
            $("#masterCheck").click();
        }
    });

This seems to throw my alert within the custom click event which is progress, but to no avail do all my checkboxes check like they should. Note: I’ve also changed the trigger(‘click’) to a .click(), which both do the same thing in my situation.

Answer 1

Update: This only applies to jQuery 1.8 and below. This was fixed in jQuery 1.9.

The problem is that manually calling click() in jQuery works differently than an actual click.

When you actually click, first the checkbox state is changed, then your click handler is called.

When you call click(), first the click handler is called, then the checkbox state is changed.

So when you call click, in your click handler, this.checked is still going to be false. You can fix this by making it a change handler instead of a click handler, like this:

$('.check-allx').change(function () {
    $(this).parents('table:eq(0)').find(':checkbox').attr('checked', this.checked);
});

See In jQuery, why does programmatically triggering 'click()' on a checkbox not immediately check it? for a fuller explanation of the difference between actual manual clicks and jquery triggered clicks.