layui結(jié)合form,table的全選、反選v1.0示例講解

更新時間：2018年08月15日 09:10:55 作者：zy1281539626

今天小編就為大家分享一篇layui結(jié)合form,table的全選、反選v1.0示例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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>唯一標(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>

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

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

以上這篇layui結(jié)合form,table的全選、反選v1.0示例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

淺談bootstrap layer.open中end的使用方法
今天小編就為大家分享一篇淺談bootstrap layer.open中end的使用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
利用prop-types第三方庫對組件的props中的變量進(jìn)行類型檢測
本篇文章主要介紹了利用prop-types第三方庫對組件的props中的變量進(jìn)行類型檢測的相關(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧
2017-05-05
前端構(gòu)建工具之gulp的配置與搭建詳解
gulpjs是一個前端構(gòu)建工具，與gruntjs相比，gulpjs無需寫一大堆繁雜的配置參數(shù)，API也非常簡單，學(xué)習(xí)起來很容易，下面這篇文章主要給大家介紹了關(guān)于前端構(gòu)建工具之gulp的配置與搭建的相關(guān)資料，需要的朋友可以參考下。
2017-06-06
基于JS實(shí)現(xiàn)動態(tài)跟隨特效的示例代碼
這篇文章主要介紹了如何利用JavaScript實(shí)現(xiàn)動態(tài)跟隨特效，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)JS有一定的幫助，感興趣的小伙伴可以了解一下
2022-06-06
使用JavaScript修改瀏覽器URL地址欄的實(shí)現(xiàn)代碼
這篇文章主要介紹了如何使用JavaScript修改瀏覽器URL地址欄，需要的朋友可以參考下
2013-10-10
JS獲取父節(jié)點(diǎn)方法
在Web應(yīng)用程序特別是Web2.0程序開發(fā)中，經(jīng)常要獲取頁面中某個元素，然后更新該元素的樣式、內(nèi)容等。
2009-08-08
微信小程序動態(tài)添加分享數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了微信小程序動態(tài)添加分享數(shù)據(jù)的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
前端實(shí)現(xiàn)截屏的兩種常見方式
這篇文章主要介紹了前端實(shí)現(xiàn)截屏的兩種常見方式,分別是使用第三方庫html2canvas和navigator.mediaDevices.getDisplayMedia,兩種方法都給出了詳細(xì)的代碼示例,需要的朋友可以參考下
2025-03-03
JavaScript如何實(shí)現(xiàn)圖片懶加載(lazyload) 提高用戶體驗(yàn)(增強(qiáng)版)
這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)圖片懶加載(lazyload) 提高用戶體驗(yàn)(增強(qiáng)版)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-11-11
JavaScript實(shí)現(xiàn)窗口抖動效果
抖動效果在各大網(wǎng)頁上都常遇到，這篇文章主要介紹了JavaScript實(shí)現(xiàn)窗口抖動效果的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-10-10