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 相关文章推荐
网上抓的一个特效
May 11 Javascript
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
js中 javascript:void(0) 用法详解
Aug 11 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
基于jQuery的表单填充实例
Aug 22 jQuery
详解async/await 异步应用的常用场景
May 13 Javascript
vue中使用腾讯云Im的示例
Oct 23 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/19 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
js简单实现自动生成表格功能示例
2020/06/02 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
Django之PopUp的具体实现方法
2019/08/31 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
一套VC试题
2015/01/23 面试题
Java程序员综合测试题
2014/04/25 面试题
大学在校生求职信范文
2013/11/21 职场文书
会计专业导师推荐信
2014/03/08 职场文书
春风行动实施方案
2014/03/28 职场文书
导游个人求职信
2014/04/25 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
一文带你探究MySQL中的NULL
2021/11/11 MySQL
nginx 配置缓存
2022/05/11 Servers