Why does a checkbox's “checked” attribute return the opposite of it's actual value on click event?

The click event of a checkbox fires before the value is changed. This way, if you return false when you override the click event, it stops the checkbox from changing it's value. You should change the event to fire onclick of the checkbox, not the li that contains it.

1 - this is why the onchange event is better for check boxes. – Andy E Apr 1 '10 at 23:10 2 This is incorrect for this question...the click event isn't on the checkbox, it's on the parent, at that point the value is set correctly. – Nick Craver?

Apr 1 '10 at 23:12 @Nick Craver, thanks for the input. I've updated my answer to be more clear as to what I meant. – Mike Sherov Apr 1 '10 at 23:17 I believe in this case the OP wants a click on the to toggle the checkbox (common scenario), see my answer for an example.

The common mistake is forgetting the 2 elements need to be linked to accomplish it, or bind it via JS, either or. – Nick Craver? Apr 1 '10 at 23:21 @Andy, trying to use click only to keep from binding many events.

@Mike, is there a clean way to override this behavior? I'd like the checked attribute to return the same value no matter what element is clicked. – Kappers Apr 1 '10 at 23:23.

Try this: The Label Now when you click on the label, the checkbox will be affected. Bind the handler to the checkbox and check . Attr('checked') and you'll find that even on click events the value of the checkbox will be correct.

Note also that that's true even if you decide to stop propagation and prevent default for the event. In other words, if you handle a click event and decide to prevent the default action, your handler will still see the value of "checked" set to what it would be if you did not stop the default action.

You would do better to fetch the appropriate checkbox as part of the click, like this: $('li'). Click(function(e) { var isChecked = $(':checkbox:checked', this). Length > 0; console.

Log(isChecked); e.stopPropagation(); }); This finds the checkbox in the that was clicked when it was clicked. As for the why part, if you're clicking on the checkbox, you're setting it to true, then the event propagates to the li which determines the checkbox is indeed checked. With an unchecked box if you're clicking on the label, it's not checking the box, so it's still false.

If you checked the box then clicked the label, you'll see true coming back, because now it's checked. If you're expecting the label to check the checkbox, you need to relate it using label's for attribute, like this: This is the label! Then the browser will handle the connection, click the label will toggle the checkbox.

No. The appropriate checkbox is already referenced. – Kappers Apr 1 '10 at 23:18 @Kappers - I was saying it's easier, not that yours was wrong :) Here's your code running and it looks fine: jsfiddle.Net/CsQf7 Check clicking the label and it's unchecked it's false, then checked it's true...this is correct behavior.

Were you looking to toggle the checkbox when anywhere in the is clicked? – Nick Craver? Apr 1 '10 at 23:24 I'm not expecting the label to trigger anything edit: I don't expect the label to toggle the element using the for attr.

When any child element is clicked, I'm letting the click event bubble to the li, and then specifying what happens next; apply validation rules then check or uncheck the checkbox depending on if validation passed and the current checked attr. Relying on the event handler I'm binding to do all of the work. – Kappers Apr 1 '10 at 23:26 @Kappers - I'm very confused as to what you want.

Currently if it's checked, no matter what triggered the click it's true, if it's not checked, it's false. Clicking the checkbox itself toggles the value so of course it'll change each click there, and it'll output whether it's now checked or not. – Nick Craver?

Apr 1 '10 at 23:29 Click an unchecked checkbox, console. Log spits true. Click a label for an unchecked checkbox, console.

Log spits out false and then true because it triggers the click for the checkbox. But, since I'm overriding the label, it returns false when unchecked checkbox: EDIT: correct link: jsfiddle.Net/p4Yz6/ – Kappers Apr 1 '10 at 23:32.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.