layui 复选框全选和反选的实现

本篇文章介绍layui复选框全选、反选的代码，并没有用到table渲染。大家可以参考一下。

引入layui.js

<table class="layui-table" id="demo" lay-filter="demo">
                    <colgroup>
                        <col width="100">
                        <col width="100">
                        <col width="80">
                        <col width="90">
                        <col width="150">
                        <col width="120">
                        <col width="70">
                        <col width="150">
                        <col width="120">
                        <col width="200">
                        <col>
                    </colgroup>

                    <thead>
                    <tr style="background-color: #fff;">
                        <td colspan="10" lay-skin="primary" style="text-align:left;">
                            <a class="layui-btn layui-btn-normal">添 加</a>
                            <a class="layui-btn layui-btn-danger">删 除</a>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            <input type="checkbox" lay-skin="primary" id="checkboxAllChoose" lay-filter="checkboxAllChoose"><div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>ID
                        </th>
                        <th>用户名</th>
                        <th>姓名</th>
                        <th>联系电话</th>
                        <th>联系邮箱</th>
                        <th>用户组</th>
                        <th>状态</th>
                        <th>最后登陆时间</th>
                        <th>最后登陆IP</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                            <td><input type="checkbox" lay-filter="checkboxOne" name="user_id" value="3" lay-skin="primary"><div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>3</td>
                            <td>admin2</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>用户组</td>
                            <td>正常</td>
                            <td>--</td>
                            <td>--</td>
                            <td>
                                <a class="layui-btn layui-btn-normal layui-btn-xs">修改</a>
                                <a class="layui-btn layui-btn-danger layui-btn-xs">删除</a>
                                <a class="layui-btn layui-btn-xs ">禁用</a>
                            </td>
                        </tr><tr>
                            <td><input type="checkbox" lay-filter="checkboxOne" name="user_id" value="2" lay-skin="primary"><div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>2</td>
                            <td>admin</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>管理员</td>
                            <td>正常</td>
                            <td>2018-10-16 13:35</td>
                            <td>127.0.0.1</td>
                            <td>
                                <a class="layui-btn layui-btn-normal layui-btn-xs">修改</a>
                                <a class="layui-btn layui-btn-danger layui-btn-xs">删除</a>
                                <a class="layui-btn layui-btn-xs ">禁用</a>
                            </td>
                        </tr><tr>
                            <td><input type="checkbox" lay-filter="checkboxOne" name="user_id" value="1" lay-skin="primary"><div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>1</td>
                            <td>admin3</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>管理员</td>
                            <td>正常</td>
                            <td>2018-12-22 21:40</td>
                            <td>127.0.0.1</td>
                            <td>
                                <a class="layui-btn layui-btn-normal layui-btn-xs">修改</a>
                                <a class="layui-btn layui-btn-danger layui-btn-xs">删除</a>
                                <a class="layui-btn layui-btn-xs ">禁用</a>
                            </td>
                        </tr>                    </tbody>
                </table>

<script>
        //JavaScript代码区域
        layui.use('form', function () {          
            var form = layui.form;        
            //全选 反选
            form.on('checkbox(checkboxAllChoose)', function(data){
                var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]'); // 复选框总数
                child.each(function(index, item){
                    item.checked = data.elem.checked;
                });
                form.render('checkbox');
            });
            // 全选时哟有一个取消选中，改为未全选
            form.on('checkbox(checkboxOne)', function(data){
                var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]'); // 复选框总数
                var childed = $(data.elem).parents('table').find('tbody input[type="checkbox"]:checked'); // 选中的复选框总数
                if(childed.length == child.length){
                    $("#checkboxAllChoose").prop("checked", true);
                    form.render('checkbox');
                }else{
                    $("#checkboxAllChoose").prop("checked", false);
                    form.render('checkbox');
                }
            });
        });
<script>

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对北漂的程序猿的支持。