jQuery点击子复选框仅勾选对应父复选框问题求解

原有代码的逻辑错误在于JS代码中嵌入了遍历所有父菜单的PHP循环，只要任意子复选框被触发，就会执行所有父级复选框的选中操作，因此会出现所有父复选框都被勾选的问题。

直接通过DOM层级关系匹配当前子复选框对应的父级复选框即可，无需在JS中混写PHP循环，替换原有jQuery代码为以下内容：

$(".sub_categories").on('change', function() {
    // 定位当前子复选框所属的一级菜单容器
    const $parentMenu = $(this).closest('.list-group-item');
    // 查找该容器下对应的父复选框
    const $parentCheckbox = $parentMenu.find('input[class*="parent_categories"]');

    if ($(this).is(':checked')) {
        // 子复选框勾选时同步勾选父级
        $parentCheckbox.prop('checked', true);
    } else {
        // 可选逻辑：当该父级下所有子复选框都取消勾选时，同步取消父级勾选
        const hasCheckedSub = $parentMenu.find('.sub_categories:checked').length > 0;
        if (!hasCheckedSub) {
            $parentCheckbox.prop('checked', false);
        }
    }
});

• 操作复选框的选中状态请使用prop()方法，attr()仅能设置初始属性，动态修改选中状态用prop()兼容性更好
• 将触发事件从click替换为change更符合表单控件的交互逻辑，覆盖所有复选框状态变更的场景
• 不需要子复选框全取消时父级自动取消的功能，可直接删除else代码段的内容

内容的提问来源于stack exchange，提问作者zubair malik