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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
一些不错的js函数ajax
Aug 20 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
javascrip关于继承的小例子
May 10 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
axios实现简单文件上传功能
Sep 25 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中extract()函数的定义和用法
2012/08/17 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
Array.prototype.slice 使用扩展
2010/06/09 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
Django中使用Celery的方法示例
2018/11/29 Python
Python何时应该使用Lambda函数
2019/07/02 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
Python 定义只读属性的实现方式
2020/03/05 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
中科创达面试题
2016/12/28 面试题
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
期末考试动员演讲稿
2014/01/10 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL