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 相关文章推荐
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 Javascript
轮播图组件js代码
Aug 08 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 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 压缩文件夹的类代码
2009/11/05 PHP
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
php中的ini配置原理详解
2014/10/14 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
Python如何实现邮件功能
2020/05/27 Python
Python中的整除和取模实例
2020/06/03 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
学术会议主持词
2014/03/17 职场文书
导游个人求职信
2014/04/25 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
质量保证书格式
2015/02/27 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
正则表达式基础与常用验证表达式
2022/06/16 Javascript
Go gorilla/sessions库安装使用
2022/08/14 Golang