layui表格checkbox選擇全選樣式及功能的實例
更新時間：2018年03月07日 16:01:13 作者：zy1281539626
下面小編就為大家分享一篇layui表格checkbox選擇全選樣式及功能的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在之前的版本，默認復選框是要有值得，默認為“勾選”兩個字，在表格里用來做選擇不適合，很難改，還好layui升級后，可以支持不寫name值，來適應(yīng)表格中的選擇操作。
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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于微信小程序input抖動問題的修復方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
JS實現(xiàn)可針對算術(shù)表達式求值的計算器功能示例
這篇文章主要介紹了JS實現(xiàn)可針對算術(shù)表達式求值的計算器功能,可實現(xiàn)基本的數(shù)字四則運算功能,涉及javascript基本數(shù)值運算與流程控制、判斷等操作技巧,需要的朋友可以參考下2018-09-09
正常使用AJAX會需要正?？紤]跨域問題，所以偉大的程序員們又折騰出了一系列跨域問題的解決方案，如JSONP、flash、ifame、xhr2等等。本文給大家介紹JS跨域解決方案之使用CORS實現(xiàn)跨域，感興趣的朋友參考下吧2016-04-04
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要為大家詳細介紹了JavaScript設(shè)計模式之策略模式的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了js控制多圖左右滾動切換效果，很實用的代碼，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
以下是從網(wǎng)上找到的一段JavaScript實現(xiàn)圖形報表的代碼，對于想客戶端顯示報表的朋友可以參考下。2009-12-12
這篇文章主要為大家詳細介紹了js實現(xiàn)鼠標懸浮框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
微信小程序?qū)崿F(xiàn)自定義modal彈窗封裝的方法
這篇文章主要介紹了小程序自定義modal彈窗封裝實現(xiàn)方法，本文通過實例代碼相結(jié)合的形式給大家介紹的非常詳細,需要的朋友可以參考下2018-06-06
JavaScript canvas實現(xiàn)跟隨鼠標移動小球
這篇文章主要為大家詳細介紹了JavaScript canvas實現(xiàn)跟隨鼠標移動小球，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02