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 相关文章推荐
某页码显示的helper 少量调整,另附js版
Sep 12 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
如何用JavaScript实现动态修改CSS样式表
May 20 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
vue--vuex详解
Apr 15 Javascript
关于ES6尾调用优化的使用
Sep 11 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下escape解码函数的实现方法
2010/08/08 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
微信公众平台接口开发入门示例
2014/12/24 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
PHP培训要多少钱
2017/06/06 PHP
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
Python3中的json模块使用详解
2018/05/05 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
Java面试题汇总
2015/12/06 面试题
二年级体育教学反思
2014/01/15 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
运动会通讯稿600字
2015/07/20 职场文书
gojs实现蚂蚁线动画效果
2022/02/18 Javascript
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby