/**
* 前端html
**/
<th>
<input type="checkbox" value="全选" id="checkall" name="admincheckall" lay-skin="primary" lay-filter="allChoose">
</th>
//遍历得到的复选框
<td class="sel">
<input type="checkbox" class="sel" name="select" value="{{$v['id']}}" lay-skin="primary" lay-filter="choose">
</td>
/**
* js
**/
//全选,全不选
layui.use(['form','layer'],function () {
var $ = layui.jquery;
var form = layui.form;
//选中的
form.on('checkbox(allChoose)',function (data) {
//判断当前全选复选框是否选中
var child = $(".sel input[type='checkbox']");
child.each(function (index,item) {
//判断当前全选是否选中,选中以后,将下面的复选框全部勾选 //item 整个复选框的input
item.checked = data.elem.checked;
})
//重新渲染
form.render('checkbox');
})
})
//layui 监听事件,检测复选框点击,如果复选框全部点击,全选复选框点击上
layui.use(['form','layer'],function () {
var form = layui.form;
form.on('checkbox(choose)', function (data) {
var child = $(".sel input[type='checkbox']");
var arr = [];
child.each(function (index,item) {
//获取点击的
arr.push($(this).prop('checked'))
})
//如果有false,全选勾掉
if(arr.includes(false)){
//为input,checkbox添加checked
document.querySelector('#checkall').checked = false
form.render('checkbox');
}else{
document.querySelector('#checkall').checked = true
form.render('checkbox');
}
})
})