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 相关文章推荐
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 Javascript
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
javascript操作select元素实例分析
Mar 27 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
JS面向对象编程详解
Mar 06 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
js图片切换具体实现代码
Oct 13 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 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图片上传存储源码并且可以预览
2011/08/26 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
js实现随机点名功能
2020/12/23 Javascript
python处理中文编码和判断编码示例
2014/02/26 Python
详解Python中的join()函数的用法
2015/04/07 Python
python使用pil生成图片验证码的方法
2015/05/08 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
库房主管岗位职责
2013/12/31 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
学习经验交流会主持词
2014/04/01 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
贷款工资证明范本
2015/06/12 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
Python如何将list中的string转换为int
2022/07/15 Ruby
Flink 侧流输出源码示例解析
2022/09/23 Servers