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让控件左右移动的三种实现方法
Sep 08 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
Vuex提升学习篇
Jan 11 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
react 路由Link配置详解
Nov 11 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
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
Vuejs+vue-router打包+Nginx配置的实例
2018/09/20 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
Python安装whl文件过程图解
2020/02/18 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
大学生军训广播稿
2014/01/24 职场文书
文秘人员工作职责
2014/01/31 职场文书
亲子拓展活动方案
2014/02/20 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
生物科学专业自荐书
2014/06/20 职场文书
党员理论学习心得体会
2016/01/21 职场文书
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技