LayUI 没有自带的一个 关于 全选 全不选联动的 checkbox 自制
先贴个demo<div class="layui-input-block" id="lm-st1">
<input type="checkbox" id="lm-st1All" name="lm-st1All" lay-filter="lm-st1All" title="全选">
<input type="checkbox" lay-filter="lmSt1Fi" name="lmSt1" title="完全相同">
<input type="checkbox" lay-filter="lmSt1Fi" name="lmSt1" title="部分相同">
<input type="checkbox" lay-filter="lmSt1Fi" name="lmSt1" title="任意位置加汉字">
<input type="checkbox" lay-filter="lmSt1Fi" name="lmSt1" title="变汉字">
<input type="checkbox" lay-filter="lmSt1Fi" name="lmSt1" title="减汉字">
<input type="checkbox" lay-filter="lmSt1Fi" name="lmSt1" title="含在其他商标中">
<input type="checkbox" lay-filter="lmSt1Fi" name="lmSt1" title="内含其他商标">
<input type="checkbox" lay-filter="lmSt1Fi" name="lmSt1" title="换序">
<input type="checkbox" lay-filter="lmSt1Fi" name="lmSt1" title="逆序">
<input type="checkbox" lay-filter="lmSt1Fi" name="lmSt1" title="读音相同">
</div>再贴个 依赖layui 本身模块 小封装的 全选函数
// 表单全选功能封装
// 1.lmObj ----提取出 包含所有checkbox的父级 div 内含全选
// 2.提取出 全选按钮 的 lay-filter的值lmAF ID值 lmAI name 值 lmAN
// 3.提取出 提取出全选按钮意外的 所有checkbox 的 lay-filter的值
function lmCheck(lmObj,lmCF,lmAF,lmAI,lmAN){
lmAI = lmAI || lmAF ;//如果 filter 和 ID 和 name 都一样
lmAN = lmAN || lmAF ;
// 监听复选 类别全选
form.on('checkbox('+ lmAF +')', function(data){
console.log(data.elem.checked); //是否被选中，true或者false
if(data.elem.checked){
// 全选
var child = $('#'+ lmObj +'').find('input:not()');
child.each(function (index, item) {
item.checked = data.elem.checked;
});
form.render('checkbox');
}else{
// 全不选
var child = $('#'+ lmObj +'').find('input:not()');
child.each(function (index, item) {
item.checked = false;
});
form.render('checkbox');
}
});
//通过判断机构是否全部选中来确定全选按钮是否选中
form.on('checkbox('+ lmCF +')', function (data) {
var child =$('#'+ lmObj +'').find('input:not()');
var childChecked =$('#'+ lmObj +'').find('input:not():checked');
if (childChecked.length == child.length) {
$('#'+ lmAF +'').prop('checked', true);
} else {
$('#'+ lmAF +'').prop('checked', false);
}
form.render('checkbox');
})
}
// 调用
lmCheck('lm-st1','lmSt1Fi','lm-st1All');
页:
[1]