layui结合form,table的全选、反选v1.0示例讲解
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
1、需要引入layui.css和layui.js
2、html代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <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代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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示例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
JavaScript中的apply()方法和call()方法使用介绍
我们发现apply()和call()的真正用武之地是能够扩充函数赖以运行的作用域,如果我们想用传统的方法实现2012-07-07基于JS实现密码框(password)中显示文字提示功能代码
这篇文章主要介绍了实现密码框(password)中显示文字提示功能代码,在项目开发中经常会用到,需要的朋友可以参考下2016-05-05
最新评论