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 相关文章推荐
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 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
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
实用函数8
2007/11/08 PHP
PHP的变量总结 新手推荐
2011/04/18 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
joomla数据库操作示例代码
2016/01/06 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
python中sleep函数用法实例分析
2015/04/29 Python
Python实现的最近最少使用算法
2015/07/10 Python
Python找出最小的K个数实例代码
2018/01/04 Python
python实现微信自动回复功能
2018/04/11 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
python判断数字是否是超级素数幂
2018/09/27 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
金融专业应届生求职信
2013/11/02 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
节水倡议书
2015/01/19 职场文书
武夷山导游词
2015/02/03 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang
Python测试框架pytest高阶用法全面详解
2022/06/01 Python
cypress测试本地web应用
2022/06/01 Javascript