layui结合form,table的全选、反选v1.0示例讲解


Posted in Javascript onAugust 15, 2018

1、需要引入layui.css和layui.js

2、html代码如下:

<div class="layui-form">
<table class="layui-table">
  <thead>
    <tr>
      <td>
        <input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose">
      </td>
      <td>ID</td>
      <td>角色名</td>
      <td>唯一标识</td>
      <td>状态</td>
      <td>操作</td>
    </tr>
  </thead>
  <tbody class="role_list">
    <tr>
      <td>
        <input type="checkbox" name="" lay-skin="primary" lay-filter="itemChoose">
      </td>
      <td>1</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
    </tr>
  </tbody>
</table>
</div>

3、js代码如下:

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');
});
form.on('checkbox(itemChoose)',function(data){
  var sib = $(data.elem).parents('table').find('tbody input[type="checkbox"]:checked').length;
  var total = $(data.elem).parents('table').find('tbody input[type="checkbox"]').length;
  if(sib == total){
    $(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked",true);
    form.render();
  }else{
    $(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked",false);
    form.render();
  }
});

第一段是全选和反选的功能,第二个是选单个的时候的效果,如果每个单独勾选,当全部选中时,总选开关会自动勾选,反之,如果没有全部选择,总选开关会自动取消选择。

以上这篇layui结合form,table的全选、反选v1.0示例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS基础之undefined与null的区别分析
Aug 08 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 #Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 #Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 #jQuery
layui 监听表格复选框选中值的方法
Aug 15 #Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 #Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 #Javascript
vue升级之路之vue-router的使用教程
Aug 14 #Javascript
You might like
php计算到指定日期还有多少天的方法
2015/04/14 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
PHP实现微信提现功能
2018/09/30 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
python tkinter实现连连看游戏
2020/11/16 Python
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
校班主任推荐信范文
2013/12/03 职场文书
交通事故检查书范文
2014/01/30 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏