layui表格checkbox选择全选样式及功能的实例


Posted in Javascript onMarch 07, 2018

在之前的版本,默认复选框是要有值得,默认为“勾选”两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中的选择操作。

1、layui版本号为 v1.0.9 rls版本(当前最新版本)

<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>出场时间</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>
	</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、版本号为v1.0.9 rls之前的版本需要更新几个文件

(a)layui\lay\dest 里的 layui.all.js文件

(b)layui\lay\modules里的 form.js 文件

(c)layui\css 里的 layui.css 文件

将以上三个文件从最新版本中覆盖到原来的版本,即可轻易实现checkbox的样式。

这篇layui表格checkbox选择全选样式及功能的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
javascript 子窗体父窗体相互传值方法
May 31 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
纯JS前端实现分页代码
Jun 21 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 #Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 #Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 #Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 #Javascript
Vue中v-for的数据分组实例
Mar 07 #Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 #Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 #Javascript
You might like
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
原生js实现放大镜
2017/02/20 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
Python的Flask框架中SQLAlchemy使用时的乱码问题解决
2015/11/07 Python
探究python中open函数的使用
2016/03/01 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
python生成excel的实例代码
2017/11/08 Python
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
python使用多进程的实例详解
2018/09/19 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
浅析python中的del用法
2020/09/02 Python
python爬虫如何解决图片验证码
2021/02/14 Python
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
西雅图的买手店:Totokaelo
2019/10/19 全球购物
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
工程招投标邀请书
2014/01/30 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
教师网络培训心得体会
2016/01/09 职场文书
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技