Как определить для каждого флажка, все ли флажки в текущем контейнере отмечены и отмечены ⇐ Jquery

[Anonymous]

У меня есть структура HTML, в которой есть несколько разделов с одним и тем же классом ввода и контейнером.

Код: Выделить всё

Staff Users 


Select all


  Add 


  Edit 





Staff Users 


Select all


  Add 


  Edit 

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

Код: Выделить всё

$(document).on('change', '.checkall', function() {
var applyallchecks = $(this).parents('#role-card-single').find('.single-role-input');
if (this.checked) {
applyallchecks.prop('checked',true);
} else {
applyallchecks.prop('checked', false);
}
});

Вторая часть, где при проверке каждого отдельного ввода, когда все флажки отмечены, я пытаюсь таким образом, но это не работает,

Код: Выделить всё

$(document).on('change', '.single-role-input' , function(e) {
if($(this).is(':checked')) {
$parent = $(this).parents('#role-card-single').find('.checkall');
var applyallchecks = $(this).parents('#role-card-single').find('.custom-checkbox');
if (applyallchecks.children('.single-role-input') + ":checked".length === applyallchecks.children('.single-role-input').length) {

$parent.prop('checked', true);
} else {
$parent.prop('checked', false);
}
}
});

Можете ли вы проверить, что не так в моем коде, почему он отмечает флажок «Выбрать все» отмеченным, когда все отдельные флажки в этом контейнере отмечены как отмеченные.
Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/766 ... tainer-and