Jquery 实现联动复选框

<div class="checkbox-group">
    <label for="mainCheckbox1">主复选框 1</label>
    <input type="checkbox" id="mainCheckbox1" class="main-checkbox" data-group="group1">
</div>

<div class="checkbox-group">
    <label>联动复选框 1</label>
    <input type="checkbox" class="linked-checkbox" data-group="group1">
</div>

<div class="checkbox-group">
    <label>联动复选框 2</label>
    <input type="checkbox" class="linked-checkbox" data-group="group1">
</div>

<div class="checkbox-group">
    <label>联动复选框 3</label>
    <input type="checkbox" class="linked-checkbox" data-group="group1">
</div>

<div class="checkbox-group">
    <label for="mainCheckbox2">主复选框 2</label>
    <input type="checkbox" id="mainCheckbox2" class="main-checkbox" data-group="group1">
</div>

<script>
    $(document).ready(function () {
        // 监听所有复选框的点击事件
        $('.checkbox-group input[type="checkbox"]').on('change', function () {
            var $this = $(this);
            var group = $this.data('group');
            var isMainCheckbox = $this.hasClass('main-checkbox');
            var isAllLinkedChecked, isAnyLinkedChecked;

            // 如果当前改变的是主复选框
            if (isMainCheckbox) {
                // 设置所有联动复选框的状态与主复选框相同
                $('.linked-checkbox[data-group="' + group + '"]').prop('checked', $this.is(':checked'));
                $('.main-checkbox').prop('checked', $this.is(':checked'));
            } else {
                // 检查所有联动复选框的选中状态
                isAllLinkedChecked = $('.linked-checkbox[data-group="' + group + '"]').length === $('.linked-checkbox[data-group="' + group + '"]:checked').length;
                isAnyLinkedChecked = $('.linked-checkbox[data-group="' + group + '"]:checked').length > 0;

                // 根据联动复选框的选中状态更新主复选框的选中状态
                $('.main-checkbox[data-group="' + group + '"]').prop('checked', isAllLinkedChecked);

                // 如果所有联动复选框都未选中，则取消所有主复选框的选中状态
                if (!isAnyLinkedChecked) {
                    $('.main-checkbox[data-group="' + group + '"]').prop('checked', false);
                }
            }
        });
    });
</script>