layui表格checkbox選擇全選樣式及功能的實例
更新時間：2018年03月07日 16:01:13 作者：zy1281539626
下面小編就為大家分享一篇layui表格checkbox選擇全選樣式及功能的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在之前的版本，默認復選框是要有值得，默認為“勾選”兩個字，在表格里用來做選擇不適合，很難改，還好layui升級后，可以支持不寫name值，來適應表格中的選擇操作。
1、layui版本號為 v1.0.9 rls版本(當前最新版本)
<span style="white-space:pre;"> </span><div class="layui-form">
<table class="layui-table">
<thead>
<tr>
<th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
<th>人物</th>
<th>民族</th>
<th>出場時間</th>
<th>格言</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="" lay-skin="primary"></td>
<td>賢心</td>
<td>漢族</td>
<td>1989-10-14</td>
<td>人生似修行</td>
</tr>
<tr>
<td><input type="checkbox" name="" lay-skin="primary"></td>
<td>張愛玲</td>
<td>漢族</td>
<td>1920-09-30</td>
<td>于千萬人之中遇見你所遇見的人，于千萬年之中，時間的無涯的荒野里…</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="plugins/layui/lay/dest/layui.all.js"></script>
<script type="text/javascript">
var $ = layui.jquery,
form = layui.form();
//全選
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');
});
</script>
2、版本號為v1.0.9 rls之前的版本需要更新幾個文件
（a）layui\lay\dest 里的 layui.all.js文件
（b）layui\lay\modules里的 form.js 文件
（c）layui\css 里的 layui.css 文件
將以上三個文件從最新版本中覆蓋到原來的版本，即可輕易實現(xiàn)checkbox的樣式。
這篇layui表格checkbox選擇全選樣式及功能的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
隨著移動網(wǎng)絡的發(fā)展,越來越多的人使用手機等移動端瀏覽網(wǎng)頁辦公,那么如果在手機打開頁面的時候顯示大大的聯(lián)盟廣告，用戶體驗度會非常差，經(jīng)過一番研究，用下面的方法實現(xiàn)了移動端瀏覽器不顯示PC端廣告。2015-10-10
使用JavaScript腳本無法直接改變Asp.net中Checkbox控件的Enable屬性的解決方法
今天工作中遇到個小問題，情況如下，當我在后臺頁面中設置Checkbox的Enable的值為false時，我在前端頁面中使用腳本(chk.disabled = false)，無法改變disabled的值為false，下面看看小編是怎么解決此問題的，需要的朋友一起了解了解吧2015-09-09
基于小程序請求接口wx.request封裝的類axios請求
這篇文章主要介紹了基于小程序請求接口wx.request封裝的類axios請求，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要介紹了JS實現(xiàn)仿微信支付彈窗功能,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了JS實現(xiàn)的五級聯(lián)動菜單效果,結(jié)合完整實例形式分析了js多級聯(lián)動菜單的完整實現(xiàn)步驟,涉及JS數(shù)組遍歷、擴展及元素節(jié)點操作相關技巧,需要的朋友可以參考下2017-02-02
如何通過Proxy實現(xiàn)JSBridge模塊化封裝
這篇文章主要介紹了如何通過Proxy實現(xiàn)JSBridge模塊化封裝,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-10-10
利用原生JavaScript實現(xiàn)造日歷輪子實例代碼
這篇文章主要給大家介紹了關于如何利用原生JavaScript實現(xiàn)造日歷輪子的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-05-05
這篇文章主要介紹了webpack+ES6+Sass搭建多頁面應用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了js獲取form的方法,實例分析了javascript操作form表單的技巧,需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細介紹了超簡單的微信小程序輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11