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 相关文章推荐
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
js 覆盖和重载 函数
Sep 25 Javascript
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 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
浅谈COOKIE和SESSION区别
2015/07/19 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
解决Python一行输出不显示的问题
2018/12/03 Python
Python2与Python3的区别点整理
2019/12/12 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
医院护士的求职信
2014/01/03 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
车辆年审委托书范本
2014/09/18 职场文书
优秀班集体申报材料
2014/12/25 职场文书
思想工作总结范文
2015/08/12 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
Python进程间的通信之语法学习
2022/04/11 Python