多容器复选框联动故障排查：单框全选未触发全选框勾选

我有多个结构相同的HTML容器，每个容器包含一个.checkall类的全选复选框与多个.single-role-input类的单个复选框。目前已实现全选框勾选/取消时，同步当前容器内所有单个复选框的状态，但手动勾选完当前容器内所有单个复选框时，对应的全选框未自动勾选，以下是实现代码，请帮忙排查错误。

已实现的全选代码 #

$(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);
        }
    }
});

错误分析 #

• 选择器语法错误：代码中applyallchecks.children('.single-role-input') + ":checked".length是将jQuery对象与字符串直接拼接，得到的是无效字符串而非选中元素集合，无法正确统计已勾选的单个复选框数量。正确写法应该用jQuery的:checked选择器筛选已勾选元素。
• 逻辑覆盖不全：仅在单个复选框勾选时触发判断，未处理取消勾选的场景，导致取消某个复选框时，全选框不会自动取消勾选状态。
• 变量未声明：$parent未用var/let声明，会成为全局变量，在多容器场景下容易引发变量冲突。

修正后的代码 #

优化后的全选代码（简化逻辑） #

$(document).on('change', '.checkall', function() {
    // 找到当前容器内的所有单个复选框，直接同步全选框的状态
    $(this).parents('#role-card-single').find('.single-role-input').prop('checked', this.checked);
});

修复后的单个复选框联动代码 #

$(document).on('change', '.single-role-input', function() {
    // 获取当前容器的全选框
    const $container = $(this).parents('#role-card-single');
    const $checkAll = $container.find('.checkall');
    // 获取当前容器内所有单个复选框和已勾选的数量
    const $allSingles = $container.find('.single-role-input');
    const checkedCount = $allSingles.filter(':checked').length;
    // 对比数量，同步全选框状态
    $checkAll.prop('checked', checkedCount === $allSingles.length);
});

内容的提问来源于stack exchange，提问作者Shoaib Fareed