layadmin是使用率比较高的后台框架，利用layadmin搭建一个后台也非常容易，layadmin提供两种版本一种是api单页版，一种是iframe版，不过在近期一个项目中，两种都用不到，只需要实现传统的一页一页的页面形式的后台即可，所以稍加改进，不过很多交互也需要重新做，比如checkbox复选框全选、反选，附代码片段：

html代码

<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>

 

JS代码

<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>

标签：checkbox, layadmin, layui, 复选框全选