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.

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.

• javascript
• jquery
• checkbox
• triggers
• click

• Just as a further test for your possible theory that the custom event handler may not be defined yet, have you tried defining your custom click handler directly above your check, just to make a minimal version of that problem? – Ben Lee Commented Oct 5, 2011 at 23:17
• Ben: I've tried this in EDIT1 above. It is now breaking into my custom click event, but all my checkboxes still aren't clicking as they should. – Lando Commented Oct 6, 2011 at 15:52

4 Answers 4

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.

Example:

$("#recurrence").trigger('click');

The below will be executed after the checkbox state change.

$("#recurrence").click(function () {
    $(this).change(function(){
        if (this.checked) {
            $(".recurr-section").show();
        } else {
            $(".recurr-section").hide();
        }
    });        
});

Setting the checked attribute programmatically doesn't trigger a corresponding click event, so you'd have to add your own .trigger('click') when you set the attribute.

Alright, considering I only needed that functionality on that individual page I've gone the easy way out and avoided trying to launch the custom click event all together.

After a coffee this morning it a was a bit clearer to me. I've added this code as a work-around.

$(document).ready(function () {
        $('table#OHTable input[type=checkbox]').attr('checked', 'checked');
    });

This simply checks ALL my checkboxes in my Table, and the proper click event is still fired when my masterCheck is clicked after the fact.