Проблема с проверкой/снятием флажков с помощью JQuery

Question

Here is a JSFiddle моей проблемы.

Примечание. Для этого я использую JQuery 2.0.2.

Я использую подключаемый модуль дерева ящика JQuery, и когда я вручную щелкаю каждый элемент внутри Subgroup B2, Subgroup B2 также будет проверен. И наоборот, если я вручную сниму один из его детей, Subgroup B2 перейдет в состояние «частичного выбора», и при снятии отметки все дети полностью снимут отметку Subgroup B2. Это работает отлично и по назначению.

Однако обратите внимание на кнопки наверху.

Я пытаюсь вызвать эти события щелчка через код.

Первая кнопка вызывает событие щелчка на ярлыке (это то, что нажимается, когда вы вручную нажимаете на квадрат/текст). И как вы заметите, он проверяет все поля, однако Subgroup B2 остается только частично выбранным.

Повторное нажатие кнопки должно выключить флажки, но это не так. Для этого нужна вторая кнопка. По какой-то причине, чтобы снять отметку с кнопок, вам нужно щелкнуть другой элемент, который должен был установить флажок. Для меня это не имеет смысла.

Наконец, если вы смешиваете взаимодействия (фактические клики и закодированные клики), вещи начинают разваливаться еще больше.

Я работаю над этим в течение нескольких часов, и когда-либо возникает проблема с взаимодействиями, это происходит из флажков.

Как я могу установить флажки в соответствии с моими закодированными кликами так же, как мое ручное нажатие?

Answer 1

Я считаю, что проблема с кнопками происходит от сработавшего события кипящего вверх DOM, вы можете использовать triggerHandler() вместо trigger(), чтобы избежать этого, просто отметят, что этот метод затрагивает только первый элемент, так что вы должны использовать его в петля:

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

Updated fiddle