jQuery实现表格与ckeckbox的全选与单选功能


Posted in Javascript onNovember 24, 2016

先给大家介绍下jQuery实现表格与ckeckbox的全选与单选功能。

先看看下面的效果:

jQuery实现表格与ckeckbox的全选与单选功能

用户点击头的checkbox时,所有表格数据行的checkbox全选或反选。

当数据行某一行没有选中时,头checkbox去选。当所有数据行的checkbox全选时,头的checkbox也选上。

html代码示例,关注高亮部分即可:

jQuery实现表格与ckeckbox的全选与单选功能

jQuery代码,可以参考如下:

jQuery实现表格与ckeckbox的全选与单选功能

PS:js实现隐藏与显示铵钮功能

表格无数据行时,隐藏下面两个铵钮,反之显示它们,如下面代码示例:

jQuery实现表格与ckeckbox的全选与单选功能

jQuery代码:

jQuery实现表格与ckeckbox的全选与单选功能

看看效果:

jQuery实现表格与ckeckbox的全选与单选功能

Javascript 相关文章推荐
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
基于javascript实现放大镜特效
Dec 03 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 #Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 #Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 #Javascript
JS 终止执行的实现方法
Nov 24 #Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 #Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 #Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 #Javascript
You might like
深入理解PHP原理之异常机制
2010/08/21 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
JavaScript File分段上传
2016/03/10 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
实例讲解vue源码架构
2019/01/24 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
小程序实现tab标签页
2020/11/16 Javascript
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
python yield关键词案例测试
2019/10/15 Python
Python tornado上传文件的功能
2020/03/26 Python
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
在职研究生自我鉴定
2013/10/16 职场文书
单位提档介绍信
2014/01/17 职场文书
《燕子》教学反思
2014/02/18 职场文书
建筑工地标语
2014/06/18 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书