快捷導(dǎo)航

layui表格checkbox選擇全選樣式及功能的實(shí)例

更新時(shí)間：2018年03月07日 16:01:13 作者：zy1281539626

下面小編就為大家分享一篇layui表格checkbox選擇全選樣式及功能的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

在之前的版本，默認(rèn)復(fù)選框是要有值得，默認(rèn)為“勾選”兩個(gè)字，在表格里用來(lái)做選擇不適合，很難改，還好layui升級(jí)后，可以支持不寫(xiě)name值，來(lái)適應(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>出場(chǎng)時(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>張愛(ài)玲</td>
	  <td>漢族</td>
	  <td>1920-09-30</td>
	  <td>于千萬(wàn)人之中遇見(jiàn)你所遇見(jiàn)的人，于千萬(wàn)年之中，時(shí)間的無(wú)涯的荒野里…</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è)文件從最新版本中覆蓋到原來(lái)的版本，即可輕易實(shí)現(xiàn)checkbox的樣式。

這篇layui表格checkbox選擇全選樣式及功能的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

如何實(shí)現(xiàn)移動(dòng)端瀏覽器不顯示 pc 端的廣告
隨著移動(dòng)網(wǎng)絡(luò)的發(fā)展,越來(lái)越多的人使用手機(jī)等移動(dòng)端瀏覽網(wǎng)頁(yè)辦公,那么如果在手機(jī)打開(kāi)頁(yè)面的時(shí)候顯示大大的聯(lián)盟廣告，用戶體驗(yàn)度會(huì)非常差，經(jīng)過(guò)一番研究，用下面的方法實(shí)現(xiàn)了移動(dòng)端瀏覽器不顯示PC端廣告。
2015-10-10
使用JavaScript腳本無(wú)法直接改變Asp.net中Checkbox控件的Enable屬性的解決方法
今天工作中遇到個(gè)小問(wèn)題，情況如下，當(dāng)我在后臺(tái)頁(yè)面中設(shè)置Checkbox的Enable的值為false時(shí)，我在前端頁(yè)面中使用腳本(chk.disabled = false)，無(wú)法改變disabled的值為false，下面看看小編是怎么解決此問(wèn)題的，需要的朋友一起了解了解吧
2015-09-09
基于小程序請(qǐng)求接口wx.request封裝的類axios請(qǐng)求
這篇文章主要介紹了基于小程序請(qǐng)求接口wx.request封裝的類axios請(qǐng)求，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
JS實(shí)現(xiàn)仿微信支付彈窗功能
這篇文章主要介紹了JS實(shí)現(xiàn)仿微信支付彈窗功能,代碼簡(jiǎ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
如何通過(guò)Proxy實(shí)現(xiàn)JSBridge模塊化封裝
這篇文章主要介紹了如何通過(guò)Proxy實(shí)現(xiàn)JSBridge模塊化封裝,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-10-10
利用原生JavaScript實(shí)現(xiàn)造日歷輪子實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于如何利用原生JavaScript實(shí)現(xiàn)造日歷輪子的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
詳解webpack+ES6+Sass搭建多頁(yè)面應(yīng)用
這篇文章主要介紹了webpack+ES6+Sass搭建多頁(yè)面應(yīng)用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-11-11
js獲取form的方法
這篇文章主要介紹了js獲取form的方法,實(shí)例分析了javascript操作form表單的技巧,需要的朋友可以參考下
2015-05-05
超簡(jiǎn)單的微信小程序輪播圖
這篇文章主要為大家詳細(xì)介紹了超簡(jiǎn)單的微信小程序輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-11-11