Why don't these checkboxes work as expected?

Question

See fiddle

1. Click on "jQuery". "latest stable" gets checked
2. Click it again. "latest stable" gets unchecked
3. Click on "latest stable". "jQuery" gets checked
4. Click it again. "jQuery" gets unchecked
5. Click "jQuery"
6. Click "latest stable"; they get out sync

Why? I'm trying to get them to stay in sync (I.e. if any of the sub-checkboxes are checked, the parent should be checked, and vice-versa. Clicking the unchecked parent should check the top child, otherwise if it's already checked, it should uncheck all children). It appears that checktop.checked doesn't accurately reflect the UI.

Edit: Tested in FF7, Chrome 16, IE9.

updated fiddle -- This alerts "i'm checked" (if you follow the instructions) when I'd expect it to say "i'm not checked" because you've just unchecked it, and the change event should fire afterwords.

Answer 1

Replace all occurences of "attr()" with "prop()" http://jsfiddle.net/Cqt5Q/8/