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)文章

微信小程序input抖動(dòng)問(wèn)題的修復(fù)方法
這篇文章主要給大家介紹了關(guān)于微信小程序input抖動(dòng)問(wèn)題的修復(fù)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
JS實(shí)現(xiàn)可針對(duì)算術(shù)表達(dá)式求值的計(jì)算器功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)可針對(duì)算術(shù)表達(dá)式求值的計(jì)算器功能,可實(shí)現(xiàn)基本的數(shù)字四則運(yùn)算功能,涉及javascript基本數(shù)值運(yùn)算與流程控制、判斷等操作技巧,需要的朋友可以參考下
2018-09-09
JS跨域解決方案之使用CORS實(shí)現(xiàn)跨域
正常使用AJAX會(huì)需要正?？紤]跨域問(wèn)題，所以偉大的程序員們又折騰出了一系列跨域問(wèn)題的解決方案，如JSONP、flash、ifame、xhr2等等。本文給大家介紹JS跨域解決方案之使用CORS實(shí)現(xiàn)跨域，感興趣的朋友參考下吧
2016-04-04
JavaScript實(shí)現(xiàn)放大鏡效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
JavaScript設(shè)計(jì)模式之策略模式詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript設(shè)計(jì)模式之策略模式的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
js控制多圖左右滾動(dòng)切換效果代碼分享
這篇文章主要介紹了js控制多圖左右滾動(dòng)切換效果，很實(shí)用的代碼，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
JavaScript 報(bào)表展示實(shí)現(xiàn)代碼
以下是從網(wǎng)上找到的一段JavaScript實(shí)現(xiàn)圖形報(bào)表的代碼，對(duì)于想客戶(hù)端顯示報(bào)表的朋友可以參考下。
2009-12-12
js實(shí)現(xiàn)鼠標(biāo)懸浮框效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)懸浮框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
微信小程序?qū)崿F(xiàn)自定義modal彈窗封裝的方法
這篇文章主要介紹了小程序自定義modal彈窗封裝實(shí)現(xiàn)方法，本文通過(guò)實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下
2018-06-06
JavaScript canvas實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)小球
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)小球，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-02-02