select全选，反选和不选的功能

最新推荐文章于 2025-07-01 07:41:48 发布

kakaxiD

最新推荐文章于 2025-07-01 07:41:48 发布

阅读量3.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：个人日记文章标签： select 前端

本文链接：https://blog.youkuaiyun.com/kakaxiD/article/details/51792106

个人日记专栏收录该内容

108 篇文章

订阅专栏

本文介绍了一个权限管理系统的详细设计，包括前端和后台权限设置的具体选项。前端涵盖了正餐、快餐等场景的操作权限，后台则涉及销售、商品、营销等多个模块的管理权限。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

<div id="usual1" class="usual">

        <div class="itab">
            <ul>
                <li><a href="#tab1" class="selected">前端权限设置</a></li>
                <li><a href="#tab2">后台权限设置</a></li>
            </ul>
        </div>


        <div id="tab1" class="tabson">
            <table border="1" cellspacing="0" cellpadding="0" class="AC">
                <tr>

                    <td width="15%"><input type="checkbox" value="" name="ac02"/>正餐</td>
                    <td><input type="checkbox" value="" name="ac03"/>开单
                        <input type="checkbox" value="" name="ac03"/>收银
                        <input type="checkbox" value="" name="ac03"/>权限打折
                        <input type="checkbox" value="" name="ac03"/>换/并桌
                        <input type="checkbox" value="" name="ac03"/>开钱箱
                        <input type="checkbox" value="" name="ac03"/>抹零
                        <input type="checkbox" value="" name="ac03"/>作废
                        <input type="checkbox" value="" name="ac03"/>当前交接
                        <input type="checkbox" value="" name="ac03"/>历史交接
                        <input type="checkbox" value="" name="ac03"/>反结账
                        <input type="checkbox" value="" name="ac03"/>赠菜
                        <input type="checkbox" value="" name="ac03"/>退菜
                    </td>
                </tr>
                <tr>
                    <td width="15%"><input type="checkbox" value="" name="ac02"/>快餐</td>
                    <td><input type="checkbox" value="" name="ac03"/>点餐
                        <input type="checkbox" value="" name="ac03"/>收银
                        <input type="checkbox" value="" name="ac03"/>权限打折
                        <input type="checkbox" value="" name="ac03"/>开钱箱
                        <input type="checkbox" value="" name="ac03"/>抹零
                        <input type="checkbox" value="" name="ac03"/>作废
                        <input type="checkbox" value="" name="ac03"/>反结账
                        <input type="checkbox" value="" name="ac03"/>当前交接
                        <input type="checkbox" value="" name="ac03"/>历史交接
                    </td>
                </tr>
                <tr>
                    <td width="15%"><input type="checkbox" value="" name="ac02"/>排队预约</td>
                    <td><input type="checkbox" value="" name="ac03"/>排号
                        <input type="checkbox" value="" name="ac03"/>叫号
                    </td>
                </tr>
                <tr>
                    <td width="15%"><input type="checkbox" value="" name="ac02"/>外卖</td>
                    <td><input type="checkbox" value="" name="ac03"/>接受
                        <input type="checkbox" value="" name="ac03"/>拒绝
                        <input type="checkbox" value="" name="ac03"/>点餐
                        <input type="checkbox" value="" name="ac03"/>收银
                        <input type="checkbox" value="" name="ac03"/>取消/作废
                        <input type="checkbox" value="" name="ac03"/>退货
                    </td>
                </tr>
                <tr>
                    <td width="15%"><input type="checkbox" value="" name="ac02"/>会员管理</td>
                    <td><input type="checkbox" value="" name="ac03"/>新增
                        <input type="checkbox" value="" name="ac03"/>充值
                        <input type="checkbox" value="" name="ac03"/>资料修改
                        <input type="checkbox" value="" name="ac03"/>积分管理
                        <input type="checkbox" value="" name="ac03"/>等级变更
                        <input type="checkbox" value="" name="ac03"/>记录查看
                    </td>
                </tr>
                <tr>
                    <td width="15%"><input type="checkbox" value="" name="ac02"/>设置</td>
                    <td></td>
                </tr>
                <tr>
                    <td width="15%"><input type="checkbox" value="" name="ac02"/>预定</td>
                    <td>
                    </td>
                </tr>
            </table>
        </div>

        <div id="tab2" class="tabson">
            <table border="1" cellspacing="0" cellpadding="0" class="AC">
                <tr id="tr1">
                    <td width="15%">销售管理</td>
                    <td width="15%"><input type="checkbox" value="" name="ac02" />销售管理</td>
                    <td><input type="checkbox" value="" name="ac03"/>营销概况
                        <input type="checkbox" value="" name="ac03"/>交易记录
                        <input type="checkbox" value="" name="ac03"/>日结记录
                        <input type="checkbox" value="" name="ac03"/>局势分析
                        <input type="checkbox" value="" name="ac03"/>商品分析
                        <input type="checkbox" value="" name="ac03"/>品类分析
                        <input type="checkbox" value="" name="ac03"/>其它分析

                    </td>
                </tr>

                <tr>
                    <td width="15%" rowspan="5">商品管理</td>
                    <td width="15%"><input type="checkbox" value="" name="ac02"/>商品资料</td>
                    <td><input type="checkbox" value="" name="ac03"/>商品列表
                        <input type="checkbox" value="" name="ac03"/>新增商品
                        <input type="checkbox" value="" name="ac03"/>导入商品
                        <input type="checkbox" value="" name="ac03"/>导出商品
                        <input type="checkbox" value="" name="ac03"/>编辑
                        <input type="checkbox" value="" name="ac03"/>删除

                    </td>
                </tr>
                <tr>

                    <td width="15%"><input type="checkbox" value="" name="ac02"/>商品分类</td>
                    <td><input type="checkbox" value="" name="ac03"/>分类列表
                        <input type="checkbox" value="" name="ac03"/>新增分类
                        <input type="checkbox" value="" name="ac03"/>编辑
                        <input type="checkbox" value="" name="ac03"/>删除

                    </td>
                </tr>
                <tr>

                    <td width="15%"><input type="checkbox" value="" name="ac02"/>套餐设置</td>
                    <td><input type="checkbox" value="" name="ac03"/>套餐列表
                        <input type="checkbox" value="" name="ac03"/>新增套餐
                        <input type="checkbox" value="" name="ac03"/>导入套餐
                        <input type="checkbox" value="" name="ac03"/>导出套餐
                        <input type="checkbox" value="" name="ac03"/>编辑
                        <input type="checkbox" value="" name="ac03"/>删除
                    </td>
                </tr>
                <tr>

                    <td width="15%"><input type="checkbox" value="" name="ac02"/>商品备注</td>
                    <td><input type="checkbox" value="" name="ac03"/>备注列表
                        <input type="checkbox" value="" name="ac03"/>新增
                        <input type="checkbox" value="" name="ac03"/>编辑
                        <input type="checkbox" value="" name="ac03"/>删除

                    </td>
                </tr>
                <tr>

                    <td width="15%"><input type="checkbox" value="" name="ac02"/>单位设置</td>
                    <td><input type="checkbox" value="" name="ac03"/>单位列表
                        <input type="checkbox" value="" name="ac03"/>新增
                        <input type="checkbox" value="" name="ac03"/>编辑
                        <input type="checkbox" value="" name="ac03"/>删除

                    </td>
                </tr>
                <tr>
                    <td width="15%" rowspan="2">营销管理</td>

                    <td width="15%"><input type="checkbox" value="" name="ac02"/>活动管理</td>
                    <td><input type="checkbox" value="" name="ac03"/>活动列表
                        <input type="checkbox" value="" name="ac03"/>新增
                        <input type="checkbox" value="" name="ac03"/>编辑
                        <input type="checkbox" value="" name="ac03"/>删除

                    </td>
                </tr>
                <tr>

                    <td width="15%"><input type="checkbox" value="" name="ac02"/>电子券</td>
                    <td><input type="checkbox" value="" name="ac03"/>电子券列表
                        <input type="checkbox" value="" name="ac03"/>新增
                        <input type="checkbox" value="" name="ac03"/>编辑
                        <input type="checkbox" value="" name="ac03"/>删除
                    </td>
                </tr>
                <tr>
                    <td width="15%" rowspan="4">会员管理</td>

                    <td width="15%"><input type="checkbox" value="" name="ac02"/>会员资料</td>
                    <td>
                        <input type="checkbox" value="" name="ac03"/>会员列表
                    </td>
                </tr>
                <tr>

                    <td width="15%"><input type="checkbox" value="" name="ac02"/>会员类型</td>
                    <td><input type="checkbox" value="" name="ac03"/>类型列表
                        <input type="checkbox" value="" name="ac03"/>新增
                        <input type="checkbox" value="" name="ac03"/>编辑
                        <input type="checkbox" value="" name="ac03"/>删除

                    </td>
                </tr>
                <tr>

                    <td width="15%"><input type="checkbox" value="" name="ac02"/>会员制度</td>
                    <td><input type="checkbox" value="" name="ac03"/>查看
                        <input type="checkbox" value="" name="ac03"/>编辑


                    </td>
                </tr>
                <tr>

                    <td width="15%"><input type="checkbox" value="" name="ac02"/>会员对账</td>
                    <td><input type="checkbox" value="" name="ac03"/>列表查看

                    </td>
                </tr>
                <tr>
                    <td width="15%" rowspan="2">员工管理</td>

                    <td width="15%"><input type="checkbox" value="" name="ac02"/>员工管理</td>
                    <td><input type="checkbox" value="" name="ac03"/>员工列表
                        <input type="checkbox" value="" name="ac03"/>新增员工
                        <input type="checkbox" value="" name="ac03"/>编辑
                        <input type="checkbox" value="" name="ac03"/>删除

                    </td>
                </tr>
                <tr>

                    <td width="15%"><input type="checkbox" value="" name="ac02"/>角色管理</td>
                    <td><input type="checkbox" value="" name="ac03"/>角色列表
                        <input type="checkbox" value="" name="ac03"/>新增角色
                        <input type="checkbox" value="" name="ac03"/>编辑
                        <input type="checkbox" value="" name="ac03"/>删除

                    </td>
                </tr>
                <tr>
                    <td width="15%" rowspan="6">系统设置</td>

                    <td width="15%"><input type="checkbox" value="" name="ac02"/>账户管理</td>
                    <td><input type="checkbox" value="" name="ac03"/>查看
                        <input type="checkbox" value="" name="ac03"/>资料修改
                        <input type="checkbox" value="" name="ac03"/>密码修改

                    </td>
                </tr>
                <tr>

                    <td width="15%"><input type="checkbox" value="" name="ac02"/>权限管理</td>
                    <td>
                        <input type="checkbox" value="" name="ac03"/>权限管理
                    </td>
                </tr>
                <tr>

                    <td width="15%"><input type="checkbox" value="" name="ac02"/>座位区管理</td>
                    <td><input type="checkbox" value="" name="ac03"/>新增
                        <input type="checkbox" value="" name="ac03"/>编辑
                        <input type="checkbox" value="" name="ac03"/>删除

                    </td>
                </tr>
                <tr>

                    <td width="15%"><input type="checkbox" value="" name="ac02"/>支付设置</td>
                    <td>
                        <input type="checkbox" value="" name="ac03"/>支付设置
                    </td>
                </tr>
                <tr>

                    <td width="15%"><input type="checkbox" value="" name="ac02"/>系统设置</td>
                    <td>
                        <input type="checkbox" value="" name="ac03"/>系统设置
                    </td>
                </tr>
                <tr>

                    <td width="15%"><input type="checkbox" value="" name="ac02"/>打印机设置</td>
                    <td>
                        <input type="checkbox" value="" name="ac03"/>打印机设置
                    </td>
                </tr>
            </table>

        </div>
    </div>

    //权限设置
    $("input[name='ac02']").click(function(){
       if($(this).attr("checked")==("checked")){
           $(this).parent().next().find($("input[type='checkbox']")).attr("checked","checked");
       }else{
           $(this).parent().next().find($("input[type='checkbox']")).removeAttr("checked");
       }
    });

  $('input[name=ac03]').on('change',function(){
        var _this = $(this);
        var setDisabled = true;
        _this.parent().children('input[name=ac03]').each(function(){
            var _another = $(this);
            if(_another.prop('checked') == false){ //发现其他有没选的和自身没选的
                setDisabled = false ;
            }
        });
        _this.parent().prev().find('input').prop({
            'checked':setDisabled ? setDisabled :  false
        });
    });