思路:使用 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); 就可以无限搭配了。