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 相关文章推荐
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
JavaScript 面向对象的 私有成员和公开成员
May 13 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
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中创建并处理图象
2006/10/09 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
PHP实现图片压缩
2020/09/09 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
js加解密 脚本解密
2008/02/22 Javascript
JavaScript 高级语法介绍
2009/06/15 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
python调用fortran模块
2016/04/08 Python
Python实现的建造者模式示例
2018/08/06 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
活动总结格式范文
2014/04/26 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
化妆品促销活动总结
2015/05/07 职场文书