通过JQuery选中/取消选中复选框的麻烦

Question

Here is a JSFiddle of my problem.

Note I'm using JQuery 2.0.2 for this.

I'm using a JQuery checkbox tree plug-in and when I manually click every element inside Subgroup B2 , Subgroup B2 will also become checked. Conversely, if I manually uncheck one of it's children, Subgroup B2 will go to a "partial selection" state and unchecking all of the children will completely uncheck Subgroup B2 . This works great and as intended.

However, notice the buttons at the top.

I'm trying to trigger these click events through code.

The first button, fires the click event on the label (which is what gets clicked when you manually click the boxes/text). And as you'll notice, it checks all the boxes, however Subgroup B2 remains only partially selected.

Clicking the button again should toggle the checkboxes off again, but it doesn't. That's what button two is for. For some reason to uncheck the buttons, you need to click a different element than was required to check the checkbox. This makes no sense to me.

Finally, if you mix interactions (actual clicks and the coded clicks) things start falling apart even more.

I've been working on this for hours now, and ever time there's a problem with the interactions, it's come from the checkboxes.

How can I get the checkboxes to respect my coded clicks as much as my manual clicks?

Answer 1

I believe the issue with the buttons comes from the triggered event bubbling up the DOM, you can use triggerHandler() instead of trigger() to avoid that, just note that this method only affects the first matched element so you need to use it in a loop:

$("#trigChildren").on('click', function () {
    $('#one, #two, #three').each(function () {
        $(this).parent().triggerHandler('click');
    });
});

Updated fiddle