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