1, 需要引入 layui.CSS 和 layui.js
2,html 代码如下:
<div class="layui-form">
<table class="layui-table">
<thead>
<tr>
<td>
<input type="checkbox" name=""lay-skin="primary"lay-filter="allChoose">
</td>
<td>ID</td>
<td > 角色名 </td>
<td > 唯一标识 </td>
<td > 状态 </td>
<td > 操作 </td>
</tr>
</thead>
<tbody class="role_list">
<tr>
<td>
<input type="checkbox" name=""lay-skin="primary"lay-filter="itemChoose">
</td>
<td>1</td>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
</tbody>
</table>
</div>
3,js 代码如下:
- form.on('checkbox(allChoose)', 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(itemChoose)',function(data){
- var sib = $(data.elem).parents('table').find('tbody input[type="checkbox"]:checked').length;
- var total = $(data.elem).parents('table').find('tbody input[type="checkbox"]').length;
- if(sib == total){
- $(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked",true);
- form.render();
- }else{
- $(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked",false);
- form.render();
- }
- });
第一段是全选和反选的功能, 第二个是选单个的时候的效果, 如果每个单独勾选, 当全部选中时, 总选开关会自动勾选, 反之, 如果没有全部选择, 总选开关会自动取消选择.
来源: http://www.jb51.net/article/145644.htm