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示例講解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。