Jquery, checkboxes and isChecked

Question

When I bind a function to a checkbox element like:

$("#myCheckbox").click( function() {
    alert($(this).is(":checked"));
});

The checkbox changes it checked attribute before the event is triggered, it's it normal behavior, thus giving and inverse result.

However, when I do:

$("#myCheckbox").click();

The checkbox changes it checked attribute after the event is triggered.

My question is, is there a way to trigger the click event from jquery like a normal click would do (first scenario)?

PS: I've already tried with trigger('click');

Answer 1

I would think you should use the "change" handler instead:

$('#myCheckbox').change(function () {
    if ($(this).attr("checked")) {
        // checked
        return;
    }
    // not checked
});

Answer 2

Well, to match the first scenario, this is something I've come up with.

http://jsbin.com/uwupa/edit

Essentially, instead of binding the "click" event, you bind the "change" event with the alert.

Then, when you trigger the event, first you trigger click, then trigger change.

Answer 3

There is a work-around that works in jQuery 1.3.2 and 1.4.2:

$("#myCheckbox").change( function() {
    alert($(this).is(":checked"));
});

//Trigger by:
$("#myCheckbox").trigger('click').trigger('change');​​​​​​​​​​​​​

But I agree, this behavior seems buggy compared to the native event.