2020年10月21日

layadmin实现checkbox复选框全选、反选代码片段


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>

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732

标签:, , ,