layui結(jié)合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>唯一標(biāo)識</td><td>狀態(tài)</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();} });

第一段是全選和反選的功能，第二個是選單個的時候的效果，如果每個單獨(dú)勾選，當(dāng)全部選中時，總選開關(guān)會自動勾選，反之，如果沒有全部選擇，總選開關(guān)會自動取消選擇。

總結(jié)

以上是生活随笔為你收集整理的layui结合form,table的全选、反选v1.0的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。