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 相关文章推荐
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
js判断是否是手机页面
Mar 17 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
使用webpack打包koa2 框架app
Feb 02 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 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
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
Prototype RegExp对象 学习
2009/07/19 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
js控制input输入字符解析
2013/12/27 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
vue组件间通信解析
2017/03/01 Javascript
jQuery DOM节点的遍历方法小结
2017/08/15 jQuery
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
详解Python网络爬虫功能的基本写法
2016/01/28 Python
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
python如何实现代码检查
2019/06/28 Python
详解python中*号的用法
2019/10/21 Python
keras实现多种分类网络的方式
2020/06/11 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
茶叶店创业计划书范文
2014/01/19 职场文书
学历公证书范本
2014/04/09 职场文书
护林防火标语
2014/06/27 职场文书
安全生产培训心得体会
2016/01/18 职场文书
2016年度创先争优活动总结
2016/04/05 职场文书