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

最新推荐文章于 2024-06-12 11:28:45 发布
最新推荐文章于 2024-06-12 11:28:45 发布
阅读量3.7k 收藏 1
点赞数 1
分类专栏： 个人日记 文章标签： select 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kakaxiD/article/details/51792106
版权

这里写图片描述

<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
        });
    });
kakaxiD
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
select全选和反选
zerocher的博客
05-23 999
var all = document.getElementById("select_all"); var vip = document.getElementsByName("vip"),l = vip.length; all.onclick = function(){ for(var i=l;i
模拟select带checkbox全选反选取消插件tomcat发布使用
01-08
模拟select控件，带checkbox，支持全选反选取消插件，测试页面为jsp页面，需要tomcat发布使用
antdv 下拉框增加全选功能
最新发布
peppa_pig的博客
06-12 284
由于select下拉框中内容过多，使用下拉框多选需要一个一个选取太过于麻烦，所以在下拉中增加全选和取消全选操作。可以自定义下拉框内容，可以满足我们的需要。
mysql select 反选_checkbox的全选与反选
weixin_39764487的博客
02-26 672
需求：1.当all选项勾选时，所有选项都被勾选，反正当所有选项被选中时，全选选项自动选中2.点击反选按钮时，被选中的选项取消选中，未被选中的选项被选中Html结构all反选首先，我们得到我们要控制的元素，并且用for循环给每个checkbox绑定点击事件：var all=document.getElementById("all")var box=document.getElementsByTagN...
SELECT 全选,反选——表单
星☆空 | 对生活要知足,学习要不知足,为人处事要知不足. 卍 ♂ | ♀ 卐 - 科技以人为本.
05-05 877
中中
Select框反选js代码
weixin_30608131的博客
07-14 155
<script type="text/javascript"> //设置类别的默认值 function setProductCategory(t) { var category = document.getElementById("category");//得到下拉列表,此处为下拉框id var ops = category.options;//得到下拉列表中的所有...
select 全选和反选 jquery
wccczxm的专栏
12-19 6946
 "jquery.js">"text/javascript"> $(function() { //全选$("#selectall").click(function() { $("input[@name=shareuser]").each(function() { $(this).attr("checked", true); }); }); //反选$("#fanall").click(func
jQuery实现全选、反选和不选功能
10-19
在网页开发中，常常需要实现全选、反选和不选的功能，尤其是在涉及多选操作的场景，例如批量删除、批量修改等。以下是如何使用jQuery实现这些功能的详细说明： 1. **全选/全不选** 当用户点击全选按钮（`#select...
jquery全选反选全不选案例
04-04
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
jQuery实现全选、反选和不选功能的方法详解
10-15
本篇文章将深入探讨如何使用jQuery实现全选、反选和不选功能，这对于处理用户界面中的复选框操作尤其有用，比如在批量处理数据时。 首先，确保在页面中正确地引入了jQuery库。在示例中，使用了百度CDN提供的两个...
vue使用监听实现全选反选功能
08-27
在部分内容中，我们可以看到实现全选反选功能的代码，包括数据的定义、页面代码和 JavaScript 代码。数据的定义中，我们可以看到 allCheck 变量用于记录全选的状态，而 checkArr 数组用于存储每个子集的状态。在页面...
AngularJS 实现购物车全选反选功能
10-19
购物车全选反选功能是电商网站中常见的需求，允许用户一次性选择或取消选择所有商品。 首先，我们需要创建一个HTML模板，该模板包含一个表格来展示购物车中的商品，以及用于全选和反选的复选框。在这个例子中，我们...
el-select全选反选功能
caief的博客
07-31 253
【代码】el-select全选反选功能。
select 全选和反选
wccczxm的专栏
12-17 2188
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"http://www.w3.org/1999/xhtml" >"server">    JQuery实现全选和反选    "javascript" type="text/javascript" src
React + Antd 自定义Select选择框 全选、清空功能
HUMM
11-09 2030
【代码】React + Antd 自定义Select选择框 全选、清空功能。
根据点击 select 下拉列表 显示对应的值，全选、反选 功能实例
weixin_41883384的博客
08-06 1226
1.点击类型里面的某一个值， 2.显示 下面对应的明细 3.点击全选 ，选择所有，如果是全选，就取消全选 4.在全选的状态下，点击去掉 后面某一个选中的值，，全选按钮变为不选的状态 5.点击搜索按钮，把所有选中的值传给后台 代码如下： <select name="type" id="type" class="form-control" onchange="selectOnchang(this)"> ...
实现SELECT的全选，反选，AB选的JAVASCRIPT代码
weixin_34403693的博客
11-24 96
参考网上，用原生JS粗糙实现。 我发现用UIKIT的BUTTON会自动刷新我那核心的模态窗口，只好用另外的LABEL或CODE标签了。 $(".btn-select-all").click(function(){ var deploypool_id = $(this).attr("deploypool_id") var ...
oracle 查询当月的数据_oracle 查询当天数据的sql条件写法
weixin_39930252的博客
12-18 256
日报数据统计中会用到当天数据的查询，下列就是日期要对应的条件：betweento_date(to_char(sysdate,'yyyy-mm-dd') || ' 00:00:01','yyyy-mm-dd hh24:mi:ss') andto_date(to_char(sysdate,'yyyy-mm-dd') || ' 23:59:59','yyyy-mm-dd hh24:mi:ss');Ora...
jquery全选反选不选
12-20
以下是基于jQuery实现全选、反选和不选的代码示例： ...请注意，上述代码中的`#checkBoxList`是一个包含多个复选框的父元素的ID，`#selectAll`、`#invertSelect`和`#unselectAll`分别是全选、反选和不选的按钮的ID。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值