Example of select all style and function of layui table checkbox selection-JS Tutorial-php.cn

Example of select all style and function of layui table checkbox selection

亚连

Release： 2018-05-31 17:23:56

Original

4720 people have browsed it

Below I will share with you an example of selecting all the styles and functions of the layui table checkbox. It has a good reference value and I hope it will be helpful to everyone.

In the previous version, the default check box must have a value. The default is the word "check". It is not suitable for making selections in the form and is difficult to change. Fortunately, after the layui upgrade, It can support not writing the name value to adapt to the selection operation in the table.

1. The layui version number is v1.0.9 rls version (currently the latest version)

<span style="white-space:pre;">	</span><p 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>
	</p>
	<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(&#39;checkbox(allChoose)&#39;, function(data){
		 var child = $(data.elem).parents(&#39;table&#39;).find(&#39;tbody input[type="checkbox"]&#39;);
		 child.each(function(index, item){
		  item.checked = data.elem.checked;
		 });
		 form.render(&#39;checkbox&#39;);
		});
	</script>

Copy after login

2. Versions before v1.0.9 rls need to update several files

(a) layui in layui\lay\dest. all.js file

(b) form.js file in layui\lay\modules

Replace the above By overwriting the three files from the latest version to the original version, the checkbox style can be easily implemented.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Detailed explanation of the simple use of vuex

##How to load data by sliding in vue mobile UI framework

Implementation method of lazy loading of vue routing

The above is the detailed content of Example of select all style and function of layui table checkbox selection. For more information, please follow other related articles on the PHP Chinese website!