Question

I am having an issue with jQuery 1.7.2/1.8.2 (didn’t test earlier versions) whereby prop('checked') seems to be returning inconsistent values.

I have 2 unchecked checkboxes:

<input id="input1" type="checkbox"/>
<input id="input2" type="checkbox"/>​

When I call $('#input1').click() on ready, prop('checked') gives me false. When I click manually on #input2 I get true. I’ve created a jsFiddle showing the problem.

I would expect the prop('checked') method to return data in a consistent fashion inside the click event handler, no matter how this was triggered, which doesn’t seem to be the case.

Am I missing something? Is this a known bug? Is there a workaround available to have consistent .prop('checked') data inside the click handler no matter how this was triggered?

PS: I’ve tested with FF 15.0.1, Chrome 21.0.1180, jQuery 1.7.2 and 1.8.2. Issue is the same whether I use .click( or .on('click'

Answer 1

The reason for the inconsistent behaviour is the difference between .click() and actually clicking the element. Actually clicking it changes the checked state, whereas .click() merely executes the jQuery-bound handlers.

So clicking the element changes whether it is checked or not, then tells you the new state, whereas using the trigger mechanism only tells you the previously existing state.