jQuery 实现多级复选框联动：二级自动选中、一级全选

<div>
        <input type='checkbox' class='checkall'>二级
    </div>
    <div>
        <input type='checkbox' class='j-checkbox'>三级
        <input type='checkbox' class='j-checkbox'>三级
    </div>
    <div>
        <input type='checkbox' class='checkall'>二级
    </div>
    <div>
        <input type='checkbox' class='j-checkbox'>三级
        <input type='checkbox' class='j-checkbox'>三级
    </div>
    <div>
        <input type='checkbox' class='checkall'>二级
    </div>
    <div>
        <input type='checkbox' class='j-checkbox'>三级
        <input type='checkbox' class='j-checkbox'>三级
    </div>
    <input type='checkbox' class='checkalls'>一级
</body>
</html>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script>
    // 二级选择框绑定change事件
    $('.checkall').change(function () {
        // 获取当前二级选择框对应的三级选择框
        var checkboxes = $(this).parent().nextAll().find('.j-checkbox');
        // 如果当前二级选择框被选中，将对应的三级选择框全部选中
        if ($(this).prop('checked')) {
            checkboxes.prop('checked', true);
        } else {
            // 否则将对应的三级选择框全部取消选中
            checkboxes.prop('checked', false);
        }
        // 触发一级选择框的change事件
        $('.checkalls').trigger('change');
    });
<pre><code>// 三级选择框绑定change事件
$('.j-checkbox').change(function () {
    // 获取当前三级选择框所在的二级选择框
    var parent = $(this).parent().prev();
    // 获取当前二级选择框对应的所有三级选择框
    var checkboxes = parent.next().find('.j-checkbox');
    // 获取被选中的三级选择框的数量
    var checkedNum = checkboxes.filter(':checked').length;
    // 如果被选中的三级选择框的数量为2，将对应的二级选择框选中
    if (checkedNum == 2) {
        parent.prop('checked', true);
    } else {
        // 否则将对应的二级选择框取消选中
        parent.prop('checked', false);
    }
    // 触发一级选择框的change事件
    $('.checkalls').trigger('change');
});

// 一级选择框绑定change事件
$('.checkalls').change(function () {
    // 获取所有二级选择框的数量
    var len = $('.checkall').length;
    // 获取被选中的二级选择框的数量
    var checkedLen = $('.checkall:checked').length;
    // 如果被选中的二级选择框的数量等于所有二级选择框的数量，将对应的一级选择框选中
    if (checkedLen == len) {
        $(this).prop('checked', true);
    } else {
        // 否则将对应的一级选择框取消选中
        $(this).prop('checked', false);
    }
});
</code></pre>
</script>