1、需要引入layui.css和layui.js
2、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>
3、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示例講解就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。
新聞熱點
疑難解答