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