layui结合form,table的全选、反选v1.0

需要引入layui.css和layui.js

html代码如下：

<div class="layui-form"> <table class="layui-table"><thead><tr><td><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></td><td>ID</td><td>角色名</td><td>唯一标识</td><td>状态</td><td>操作</td></tr></thead><tbody class="role_list"><tr><td><input type="checkbox" name="" lay-skin="primary" lay-filter="itemChoose"></td><td>1</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xxx</td></tr></tbody> </table> </div>

js代码如下：

form.on('checkbox(allChoose)', function(data){var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');child.each(function(index, item){item.checked = data.elem.checked;});form.render('checkbox'); }); form.on('checkbox(itemChoose)',function(data){var sib = $(data.elem).parents('table').find('tbody input[type="checkbox"]:checked').length;var total = $(data.elem).parents('table').find('tbody input[type="checkbox"]').length;if(sib == total){$(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked",true);form.render();}else{$(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked",false);form.render();} });

第一段是全选和反选的功能，第二个是选单个的时候的效果，如果每个单独勾选，当全部选中时，总选开关会自动勾选，反之，如果没有全部选择，总选开关会自动取消选择。

总结

以上是生活随笔为你收集整理的layui结合form,table的全选、反选v1.0的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。