layui表格监听全选_layui表格(表单)的全选功能

最近在使用layui这个框架,其中有用到表格的全选功能,下面记录下我的使用.html文件需要引用的是layui.js和layui.css,但是上面两个文件又会引入其他文件.,如图所示,

所以建议从layui官网把整个下载下来,

下面看代码

Document

table>thead>tr>th,

table>tbody>tr>td {

text-align: center!important

}

ID角色名唯一标识状态操作

1张三哈哈已完成编辑2李四呵呵未完成编辑3王五嘻嘻已完成编辑

layui.use(['form', 'element', 'jquery'], function () {

var form = layui.form(),

element = layui.element(),

$ = layui.jquery;

//全选功能

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();

}

});

});