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 相关文章推荐
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
React快速入门教程
Jan 17 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 Javascript
js实现无缝轮播图特效
May 09 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 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
服务器端解压缩zip的脚本
2006/12/22 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
php实现的农历算法实例
2015/08/11 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
精解window.setTimeout()&window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
python二叉树的实现实例
2013/11/21 Python
Python重新引入被覆盖的自带function
2014/07/16 Python
python爬虫使用cookie登录详解
2017/12/27 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
基于python操作ES实例详解
2019/11/16 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
机械制造专业个人的自我评价
2013/12/28 职场文书
银行门卫岗位职责
2013/12/29 职场文书
销售人员自我评价
2014/02/01 职场文书
地球一小时倡议书
2014/04/15 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers