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 相关文章推荐
JTrackBar水平拖动效果
Jul 15 Javascript
IE 下的只读 innerHTML
Aug 21 Javascript
JavaScript 学习技巧
Feb 17 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
详解React项目中碰到的IE问题
Mar 14 Javascript
原生js实现下拉框选择组件
Jan 20 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
详解微信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
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
angular *Ngif else用法详解
2020/12/15 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
Python3遍历目录树实现方法
2015/05/22 Python
详解python中requirements.txt的一切
2017/03/03 Python
python调试神器PySnooper的使用
2019/07/03 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
远程调用的原理
2014/07/05 面试题
公司委托书范本
2014/04/04 职场文书
涨价通知怎么写
2015/04/23 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
JS实现数组去重的11种方法总结
2022/04/04 Javascript
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python
MySQL常用慢查询分析工具详解
2022/08/14 MySQL
Java获取字符串编码格式实现思路
2022/09/23 Java/Android