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 相关文章推荐
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
JavaScript 题型问答有答案参考
Feb 17 Javascript
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
对Layer UI 模块化的用法详解
Sep 26 Javascript
基于JavaScript实现控制下拉列表
May 08 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 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
神族 Protoss 历史背景
2020/03/14 星际争霸
PHP4实际应用经验篇(9)
2006/10/09 PHP
我用php+mysql写的留言本
2006/10/09 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
php字符串分割函数用法实例
2015/03/17 PHP
php实现的递归提成方案实例
2015/11/14 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
jquery插件之easing 动态菜单
2010/08/21 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
JavaScript模块详解
2017/12/18 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
Python连接数据库学习之DB-API详解
2017/02/07 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
乡镇镇长个人整改措施
2014/10/01 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
邹越演讲观后感
2015/06/15 职场文书
电力培训学习心得体会
2016/01/11 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis
Python实现信息管理系统
2022/06/05 Python