思路:使用 jqeury 修改原始 checkbox 的选择状态,然后重新渲染 form。
<html>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>php日记</title>
<link rel="stylesheet" href="layui-v2.3.0/css/layui.css" media="all">
</header>
<body>
<form class="layui-form">
<div style="height:30px;"><input type="checkbox" lay-skin="primary" lay-filter="layTableAllChoose" title="全选"></div>
<p><input type="checkbox" name="layTableCheckbox" lay-skin="primary" ></p>
<p><input type="checkbox" name="layTableCheckbox" lay-skin="primary" ></p>
<p><input type="checkbox" name="layTableCheckbox" lay-skin="primary" ></p>
<p><input type="checkbox" name="layTableCheckbox" lay-skin="primary" ></p>
<p><input type="checkbox" name="layTableCheckbox" lay-skin="primary" ></p>
<p><input type="checkbox" name="layTableCheckbox" lay-skin="primary" ></p>
</form >
<script src="layui-v2.3.0/layui.js"></script>
<script src="2.1.4.min.js" ></script>
<script>
//Demo
layui.use('form', function(){
var form = layui.form;
form.on('checkbox(layTableAllChoose)',function (data){
console.log(data.elem.checked);
$(":checkbox[name='layTableCheckbox']").attr("checked", data.elem.checked);
form.render('checkbox');
});
});
</script>
</body>
</html>谷歌浏览器:执行代码,点击全选,确实可以全选还能取消全选。可是点击第三下的时候,不行了。
查询了下资料,问题在与 Jquery 的 attr ,应该使用 prop 来修改属性。
额外了解了一些知识:jquery 1.6 以后的版本,attr 只是 html 属性的获取和设置。 prop 是针对节点js对象属性设置和获取。
虽然目前不了解里面差别,但能发现 layui 不支持 attr 和 form.render('checkbox') 的无限搭配。
把 $(":checkbox[name='layTableCheckbox']").attr("checked", data.elem.checked);
换成 $(":checkbox[name='layTableCheckbox']").prop("checked", data.elem.checked); 就可以无限搭配了。