layui复选框的全选与取消实现方法


Posted in Javascript onSeptember 02, 2019

废话不多说啦,直接贴上代码吧!

  <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">
                <span class="x-red">*</span>权限表
            </label>
            <div class="layui-input-block">
                <table class="layui-table layui-input-block">
                    <tbody>
                <tr>
                    <td>
                        客户管理
                       <input class="checkbox_v1" type="checkbox" name="checkbox_v1" value="客户管理" lay-filter="checkbox_v1">
                    </td>
                    <td>
                        <div class="layui-input-block">
                            <input name="checkbox1[]" type="checkbox" value="意向" class="checkbox1" lay-filter="checkbox1">意向
                            <input name="checkbox1[]" type="checkbox" value="会员" class="checkbox1" lay-filter="checkbox1">会员
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        施工管理
                        <input class="checkbox_v2" type="checkbox" name="checkbox_v2" value="施工管理" lay-filter="checkbox_v2">
                    </td>
                    <td>


                        <div class="layui-input-block">
                                <input type="checkbox" name="checkbox2[]" value="设计" class="checkbox2" lay-filter="checkbox2">设计
                                <input type="checkbox" name="checkbox2[]" value="完工" class="checkbox2" lay-filter="checkbox2" >完工
                                <input type="checkbox" name="checkbox2[]" value="业主" class="checkbox2" lay-filter="checkbox2">业主
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        系统设置
                       <input class="checkbox_v3" type="checkbox" name="checkbox_v3" value="系统设置" lay-filter="checkbox_v3">
                    </td>
                    <td>
                        <div class="layui-input-block">
                                <input type="checkbox" name="checkbox3[]" value="个人资料" class="checkbox3" lay-filter="checkbox3" >个人
                                <input type="checkbox" name="checkbox3[]" value="BOSS"  class="checkbox3" lay-filter="checkbox3" >BOSS
                        </div>
                    </td>
                </tr>
                    </tbody>
                </table>
            </div>
        </div>
<script>
 layui.use([ 'layer', 'jquery', 'form'], function() {

  $ = layui.jquery;
  var form = layui.form
    ,layer = layui.layer;

  form.on('checkbox(checkbox_v1)', function(data){
   var a = data.elem.checked;
   if(a == true){
    $(".checkbox1").prop("checked", true);
    form.render('checkbox');
   }else {
    $(".checkbox1").prop("checked", false);
    form.render('checkbox');
   }
  });

  form.on('checkbox(checkbox1)', function(data) {
   var b = data.elem.checked;
   if(b == true){
    $(".checkbox_v1").prop("checked", true);
    form.render('checkbox');
   }else {
    var item = $(".checkbox1");
    var bool = false;
    for (var i = 0; i < item.length; i++) {
     if(item[i].checked == true){
      bool = true;
      break;
     }
    }
    if(bool==false) {
     $(".checkbox_v1").prop("checked", false);
     form.render('checkbox');
    }
   }

  });

  form.on('checkbox(checkbox_v2)', function(data){
   var a = data.elem.checked;
   if(a == true){
    $(".checkbox2").prop("checked", true);
    form.render('checkbox');
   }else {
    $(".checkbox2").prop("checked", false);
    form.render('checkbox');
   }
  });

  form.on('checkbox(checkbox2)', function(data) {
   var b = data.elem.checked;
   if(b == true){
    $(".checkbox_v2").prop("checked", true);
    form.render('checkbox');
   }else {
    var item = $(".checkbox2");
    var bool = false;
    for (var i = 0; i < item.length; i++) {
     if(item[i].checked == true){
      bool = true;
      break;
     }
    }
    if(bool==false) {
     $(".checkbox_v2").prop("checked", false);
     form.render('checkbox');
    }
   }

  });

  form.on('checkbox(checkbox_v3)', function(data){
   var a = data.elem.checked;
   if(a == true){
    $(".checkbox3").prop("checked", true);
    form.render('checkbox');
   }else {
    $(".checkbox3").prop("checked", false);
    form.render('checkbox');
   }
  });

  form.on('checkbox(checkbox3)', function(data) {
   var b = data.elem.checked;
   if(b == true){
    $(".checkbox_v3").prop("checked", true);
    form.render('checkbox');
   }else {
    var item = $(".checkbox3");
    var bool = false;
    for (var i = 0; i < item.length; i++) {
     if(item[i].checked == true){
      bool = true;
      break;
     }
    }
    if(bool==false) {
     $(".checkbox_v3").prop("checked", false);
     form.render('checkbox');
    }
   }

});

</script>

以上这篇layui复选框的全选与取消实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
跨浏览器的事件对象介绍
Jun 27 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
JavaScript在IE和FF下的兼容性问题
May 19 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
Mar 04 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 #Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 #Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 #Javascript
微信小程序 简易计算器实现代码实例
Sep 02 #Javascript
vue日历/日程提醒/html5本地缓存功能
Sep 02 #Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 #Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 #Javascript
You might like
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
python使用心得之获得github代码库列表
2014/06/25 Python
详解Python核心对象类型字符串
2018/02/11 Python
python奇偶行分开存储实现代码
2018/03/19 Python
Python中函数参数调用方式分析
2018/08/09 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
个人作风剖析材料
2014/02/02 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
妇女儿童发展规划实施方案
2014/03/16 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
创业计划书之甜品店
2019/09/18 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
Nginx反向代理、重定向
2022/04/13 Servers