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日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
基于bootstrap风格的弹框插件
Dec 28 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
js+canvas实现五子棋小游戏
Aug 02 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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
JavaScript继承方式实例
2010/10/29 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
js实现漫天星星效果
2017/01/19 Javascript
js闭包学习心得总结
2018/04/17 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
详解Python中的strftime()方法的使用
2015/05/22 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
python 全局变量的import机制介绍
2017/09/07 Python
python学生管理系统
2019/01/30 Python
Django stark组件使用及原理详解
2019/08/22 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
墨西哥购物网站:Elektra
2020/01/21 全球购物
写自荐信有哪些不宜?
2013/10/17 职场文书
半年思想汇报
2013/12/30 职场文书
分居协议书范本
2014/11/03 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android
springboot读取nacos配置文件
2022/05/20 Java/Android