首页 > 编程 > JavaScript > 正文

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

2019-11-19 10:55:19
字体:
来源:转载
供稿:网友

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

   <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复选框的全选与取消实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表