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.boxy插件的iframe扩展代码
Jul 02 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
原生js实现轮播图
Feb 27 Javascript
vue双向绑定简要分析
Mar 23 Javascript
JavaScript实现弹出广告功能
Mar 30 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
javascript实现随机抽奖功能
Dec 30 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
自定义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
建立动态的WML站点(一)
2006/10/09 PHP
详解php中反射的应用
2016/03/15 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
python集合比较(交集,并集,差集)方法详解
2018/09/13 Python
python实现停车管理系统
2018/11/30 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
表彰会主持词
2014/03/26 职场文书
村抢险救灾方案
2014/05/09 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
社区护士演讲稿
2014/08/27 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python