Question

note: all this is on chrome

I am trying to test something that responds to a click a checkbox. I realize jQuery.click() exists, but it seems to be different from a “native” click in that during the click handler, the state of the checkbox isn’t updated yet (so checkbox is unchecked, you call .click(), in the handler, checkbox is still unchecked. If you actually click the box, in the handler the state is checked).

I apologize for the confusing question, here is a fiddle http://jsfiddle.net/XBhWy/

Click the foo button, notice that button handler says it has been checked, but the checkbox handler says it has not been checked (even though the ui shows a checkmark). Now, click the checkbox itself. Notice the click event handler is reporting what you would expect it to report.

My question is how to simulate the same thing that happens when you actually click the box.

Now, I took a stab at a better simulated event like this

$.fn.check = function() {
  if ($(this).is(':checked')) {
    $(this).attr('checked', 'checked');
  } else {
    $(this).removeAttr('checked');
  }
  $(this).click();
}

Unfortunately (and somewhat confusingly), it didn’t work.

Anyone run into this before? Can it be accomplished?

Note that I’m not looking for the click method.

Answer 1

It would seem that the user-specified function declared in the checkbox click() event fires BEFORE the checkbox is really updated. I played around with it and found that the change() listener acts as expected.

jsfiddle