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

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

以上这篇layui结合form,table的全选、反选v1.0示例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。