chaoyu/view/manager/member/menu_alloter.html

<div class="layui-card layui-col-md12">
    <div class="layui-card-body">
        <form class="layui-form" data-action="{:url('manager.member/menualloter')}" >
            <input type="hidden" name="_token" value="{$_token ?? ''}"/>
            {foreach name="cates" item="item"}
            <table class="layui-table layui-form" style="float: left; margin: 0 0 25px;">
                <thead>
                    <tr>
                        <td colspan="2"><input  type="checkbox" {in name="$item['id']" value="$memberCates" }checked="checked" {/in} name="cates[]_{$item.id}" value="{$item.id}" lay-skin="primary" title="{$item.title}" lay-filter="select_all" /></td>
                    </tr>
                </thead>
                <tbody>
                    {notempty name="item.children"}
                    {foreach name="item.children" item="sub"}
                    <tr class="erji">
                        <td style="padding-left: 30px;">
                            <div class="erjichkall">
                                <input type="checkbox" {in name="$sub['id']" value="$memberCates" } checked="checked"{/in} name="cates[]_{$item.id}_{$sub.id}" value="{$sub.id}" lay-skin="primary"  title="{$sub.title}" lay-filter="select_item" />
                            </div>
                        </td>
                        <td>
                            {notempty name="sub.children"}
                                {foreach $sub['children'] as $child}
                                <div class="erjichk">
                                    <input type="checkbox" {in name="$child['id']" value="$memberCates" } checked="checked"{/in} name="cates[]_{$item.id}_{$child.id}" value="{$child.id}" lay-skin="primary"  title="{$child.title}" lay-filter="select_item_three" />
                                </div>
                                {/foreach}
                            {/notempty}
                        </td>
                    </tr>
                    {/foreach}
                    {/notempty}
                </tbody>
            </table>
            {/foreach}
            <div class="layui-clear"></div>
            <hr style="margin: 5px 0 30px;">
            <div class="layui-form-item text-center" id="grouprule-ok">
                <input type="hidden" class="layui-input" name="id" value="{$id}" />
                <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="submitAll">保存</button>
            </div>
        </form>
    </div>
</div>
<style type="text/css">
    .erjichk,.erjichkall{ display: inline-block;}
    .erjichk{ margin-right: 10px;}
</style>
<script type="text/javascript">
    layui.use('form', function(){
        var form = layui.form;
        
        form.on('checkbox(select_all)', function(data){
            var parentTableCheck = $(this).parents(".layui-table").find('input[lay-filter="select_all"]'); //所属全选复选框
            var childrenCheck = $(this).parents(".layui-table").find('input[lay-filter="select_item"]'); //所属子同复选框
            var sj = $(this).parents(".layui-table").find('input[lay-filter="select_item_three"]'); //所属子同复选框
            if(data.elem.checked) {
                $(childrenCheck).each(function(){
                    if (!$(this).prop('disabled')) {
                        $(this).prop("checked", true);
                    }
                });
                $(sj).each(function(){
                    if (!$(this).prop('disabled')) {
                        $(this).prop("checked", true);
                    }
                });
            } else {
                $(childrenCheck).each(function(){
                    if(!$(this).hasClass('perm-read-only')){
                        $(this).prop("checked", false);
                    }
                });
                $(sj).each(function(){
                    if(!$(this).hasClass('perm-read-only')){
                        $(this).prop("checked", false);
                    }
                });
            }
            form.render('checkbox');
        });
      
        form.on('checkbox(select_item)', function(data){
            var sj = data.othis.closest('.erji').find('input[lay-filter="select_item_three"]')
            if(data.elem.checked){
                $(sj).each(function(){
                    if (!$(this).prop('disabled')) {
                        $(this).prop("checked", true);
                    }
                });
            }else{
                $(sj).each(function(){
                    if(!$(this).hasClass('perm-read-only')){
                        $(this).prop("checked", false);
                    }
                });
            }
            
            var parentTableCheck = $(this).parents(".layui-table").find('input[lay-filter="select_all"]'); //所属全选复选框
            var brotherCheck = $(this).parents(".layui-table").find('input[lay-filter="select_item"]'); //所属同级复选框
            var allChecked = true;
            if($(this).hasClass('perm-read-only')){
                $(this).prop("checked", true);
            }
            brotherCheck.each(function () {
                if (!$(this).prop("disabled") && !$(this).hasClass('perm-read-only')) {
                    if (!$(this).prop("checked")) {
                        allChecked = false;
                    }
                }
            });
            if(allChecked) {
                parentTableCheck.prop('checked', true);
            } else {
                parentTableCheck.prop('checked', false);
            }
            form.render('checkbox');
        });
      
        form.on('checkbox(select_item_three)', function(data){
            var all = $(this).parents(".layui-table").find('input[lay-filter="select_all"]'); //所属全选复选框
            var parentTableCheck = $(this).closest(".erji").find('input[lay-filter="select_item"]'); //所属全选复选框
            var brotherCheck = $(this).closest(".erji").find('input[lay-filter="select_item_three"]'); //所属同级复选框
            var allChecked = true;
            if($(this).hasClass('perm-read-only')){
                $(this).prop("checked", true);
            }
            brotherCheck.each(function () {
                if (!$(this).prop("disabled") && !$(this).hasClass('perm-read-only')) {
                    if (!$(this).prop("checked")) {
                        allChecked = false;
                    }
                }
            });
            if(allChecked) {
                parentTableCheck.prop('checked', true);
                all.prop('checked', true);
            } else {
                parentTableCheck.prop('checked', false);
                all.prop('checked', false);
            }
            form.render('checkbox');
        });
      
    });
</script>