Layui的checkbox全选以及取消赋值操作
Posted @Kerry~
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Layui的checkbox全选以及取消赋值操作相关的知识，希望对你有一定的参考价值。
全选操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body>
<form class="layui-form">
<div class="checkallbox">
<input lay-skin="primary" type="checkbox" id="checkall" name="type" lay-filter="allChoose" value="checkall"/><span>全选</span></div>
<div class="seach-box">
<ul>
<li><input lay-skin="primary" lay-filter="singleChoose" type="checkbox" name="like1[aaa]" value="aaa"/><span>aaa</span></li>
<li><input lay-skin="primary" lay-filter="singleChoose" type="checkbox" name="like1[bbb]" value="bbb"/><span>bbb</span></li>
<li><input lay-skin="primary" lay-filter="singleChoose" type="checkbox" name="like1[ccc]" value="ccc"/><span>ccc</span></li>
<li><input lay-skin="primary" lay-filter="singleChoose" type="checkbox" name="like1[ddd]" value="ddd"/><span>ddd</span></li>
</ul>
</div>
</form>
<script>
form.on('checkbox(allChoose)', function (data) {
var child = $(".seach-box input[type='checkbox']");
child.each(function (index, item) {
item.checked = data.elem.checked;
});
form.render('checkbox');
form.render('checkbox');
});
</script>上面是全选操作
下面取消全选以及判断是否全选
form.on('checkbox(singleChoose)', function (data) {
console.log(data.elem.checked);
let that = $(data.elem);
var child = that.parents('div').find(".seach-box input[type='checkbox']");
var checked = [];
child.each(function (index, item) {
if (!item.checked) {
checked.push(item.checked);
}
});
if (checked.length > 0) {
// 取消全选
$('#checkall').prop("checked",false);
} else {
$('#checkall').prop("checked",true);
}
form.render('checkbox');
});我试过使用jquery动态设置layui的checkbox元素的选中状态时始终只能取消选中，却不能重新勾选，点击勾选则没有问题，代码如下 （但是不行）
if (value == "true") {
$("#checkall").attr("checked", "checked");
} else {
$("#checkall").removeAttr("checked");
}最后使用了这种（如下）可以了
if (value == "true") {
$('#checkall').prop("checked", true);
} else {
$('#checkall').prop("checked", false);
}
以上是关于Layui的checkbox全选以及取消赋值操作的主要内容，如果未能解决你的问题，请参考以下文章