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

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

1. 需要引入layui.css和layui.js

2. html代码如下：

   
   
       
   
           
   
               
   
                   
               
               
   ID
               
   角色名
               
   唯一标识
               
   状态
               
   操作
           
       
       
   
           
   
               
   
                   
               
               
   1
               
   xxx
               
   xxx
               
   xxx
               
   xxx
           
       
   
   
   

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();
       }
   }); 
   

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