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获取网页中的js、css、Flash等文件
Dec 20 Javascript
datagrid框架的删除添加与修改
Apr 08 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
easyui-combobox 实现简单的自动补全功能示例
Nov 08 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 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
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
Bootstrap表单布局
2016/07/19 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
mui框架移动开发初体验详解
2017/10/11 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
python处理xml文件的方法小结
2017/05/02 Python
python实现猜拳游戏
2020/03/04 Python
django 外键创建注意事项说明
2020/05/20 Python
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
维德科技C#面试题笔试题
2015/12/09 面试题
安全生产检查通报
2014/01/29 职场文书
租房协议书怎么写
2014/04/10 职场文书
一岗双责责任书
2014/04/15 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
党建工作经验交流材料
2014/05/25 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
布达拉宫导游词
2015/02/02 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
Vue vee-validate插件的简单使用
2021/06/22 Vue.js
详解JAVA的控制语句
2021/11/11 Java/Android
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers