layui表格（表单）的全选功能
最近在使⽤layui这个框架，其中有⽤到表格的全选功能，下⾯记录下我的使⽤.html⽂件需要引⽤的是layui.js和layui.css，但是上⾯两个⽂件⼜
会引⼊其他⽂件.，如图所⽰,
所以建议从layui官⽹把整个下载下来,
下⾯看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./module/layui/css/layui.css">
<style>
table>thead>tr>th,
table>tbody>tr>td {
text-align: center!important
}
</style>
</head>
<body>
<div class="layui-form">
<table class="layui-table">
<thead>
<tr>
<th>
<input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose">
</th>
<th>ID</th>
<th>⾓⾊名</th>
<th>唯⼀标识</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody class="role_list">
<tr>
<td>
<input type="checkbox" name="" lay-skin="primary" lay-filter="itemChoose">
</td>
<td>1</td>
<td>张三</td>
<td>哈哈</td>
<td>已完成</td>
<td>编辑</td>
</tr>
<tr>
<td>
<td>
<input type="checkbox" name="" lay-skin="primary" lay-filter="itemChoose">
</td>
<td>2</td>
<td>李四</td>
<td>呵呵</td>
<td>未完成</td>
<td>编辑</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" lay-skin="primary" lay-filter="itemChoose">
</td>
<td>3</td>
<td>王五</td>
<td>嘻嘻</td>
<td>已完成</td>
<td>编辑</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script src="./module/layui/layui.js"></script>
<script>
layui.use(['form', 'element', 'jquery'], function () {
var form = layui.form(),
element = layui.element(),
$ = layui.jquery;
//全选功能
<('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;
});
});
//全选和部分选中时候，表头全选按钮的样式变化
<('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);                der();
} else {
$(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked",
false);
}
});
});
layui下载</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。