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 相关文章推荐
可输入的下拉框
Jun 19 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
Feb 24 Javascript
jquery插件之easing使用
Aug 19 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
JS判断客服QQ号在线还是离线状态的方法
Jan 13 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
详解一个基于套接字实现长连接的express
Mar 28 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
记一次vue跨域的解决
Oct 21 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
一个简单计数器的源代码
2006/10/09 PHP
php SQL防注入代码集合
2008/04/25 PHP
使用php来实现网络服务
2009/09/15 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
python list语法学习(带例子)
2013/11/01 Python
Python实现拼接多张图片的方法
2014/12/01 Python
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
简单了解python元组tuple相关原理
2019/12/02 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
服装销售人员求职自我评价
2013/09/26 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
企业年检委托书范本
2014/10/14 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
关于迟到的检讨书
2015/05/06 职场文书
诚信考试主题班会
2015/08/17 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python
在redisCluster中模糊获取key方式
2021/07/09 Redis