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实现检测浏览器及版本的脚本代码
Jan 22 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 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基础知识:类与对象(1)
2006/12/13 PHP
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
javascript 常用关键字列表集合
2007/12/04 Javascript
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
纯js写的分页表格数据为json串
2014/02/18 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
Python Django 命名空间模式的实现
2019/08/09 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
Html5页面二次分享的实现
2018/07/30 HTML / CSS
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
AOP的定义以及作用
2013/09/08 面试题
中间件分为哪几类
2012/03/14 面试题
安全生产活动月方案
2014/03/09 职场文书
网站美工岗位职责
2014/04/02 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书