Home > Web Front-end > JS Tutorial > body text

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

亚连
Release: 2018-05-31 17:23:56
Original
4677 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

(c) layui.css file in layui\css

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.

Related articles:

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template