How to do a jQuery trigger on checkbox or radio so that it is exactly the same as a user clicking it?

Question

I have a page that is using can.js so it is harder to reproduce on jsfiddle.net, but the end result is this:

If I click on the checkbox (or it can be a radio button as well), then another input text box will update the changes that was due to my click. (for example, the text box will now say "Blue").

However, if I do it programmatically using jQuery right inside of Firebug's console or Chrome's developer tool console:

$("#some-form input:eq(3)").trigger("click");  

or

 $("#some-form input:eq(3)").click();

then the checkbox on the webpage will get checked in fact, but the input text box value will not update to "Blue" like before.

So to emulate even more closely a user clicking on the checkbox using code, I tried:

$("#some-form input:eq(3)").trigger("focus");
$("#some-form input:eq(3)").trigger("mousedown");
$("#some-form input:eq(3)").trigger("mouseup");
$("#some-form input:eq(3)").trigger("click");
$("#some-form input:eq(3)").trigger("change");

but all of the above together still will not emulate a user manually clicking on the checkbox.

Although it can be complicated that the can.js code was using either can.compute() or can.Observe() to update that input text box, BUT the key is, if a user manually clicking on the radio or the checkbox can work, why not programmatically. In other words, what can be done programmatically that is almost identical to a real physical click? Is there some events that I missed possibly?

(more details: this is tried on the most recent Firefox and Chrome, so it should not be a browser issue. Also, I tried even first focus and then trigger a keydown event with a SPACE character and it still won't have the effect. What is more strange is that, if I do trigger the click twice, then the input text box actually shows the update to "Blue", so why twice?).

Answer 1

The answer is, it is due to a jQuery bug:

http://bugs.jquery.com/ticket/3827

I can reproduce it by using:

// strange behavior:
$("#some-form input:eq(3)").click();

and if replaced by a native click:

document.getElementById("some-form").getElementsByTagName("input")[3].click();

then it works perfectly on Chrome, Safari, and Firefox.

So the fix seems like came out with jQuery 1.9, which was on Jan 15, 2013.

There is more info in: In jQuery, why after a trigger of click on an unchecked checkbox, the event handler reports it is not checked?