layui 美化后的复选框实现全选功能方法

阅读数: 952 2018年08月23日

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


参考资料
https://blog.csdn.net/m0_37771751/article/details/77941019
https://www.cnblogs.com/songdongdong/p/6340373.html
phpriji.cn | 网站地图 | 沪ICP备17015433号-1