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 相关文章推荐
javascript 面向对象编程基础:封装
Aug 21 Javascript
javascript 常用功能总结
Mar 18 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
JS父页面与子页面相互传值方法
Mar 05 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
详解如何在微信小程序中愉快地使用sass
Jul 30 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 Javascript
原生js实现3D轮播图
Mar 21 Javascript
Vue实现简单的拖拽效果
Aug 25 Javascript
利用JavaScript写一个简单计算器
Nov 27 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
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
PHPLog php 程序调试追踪工具
2009/09/09 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
Python调用C语言开发的共享库方法实例
2015/03/18 Python
使用Python解析JSON数据的基本方法
2015/10/15 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
django富文本编辑器的实现示例
2019/04/10 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
python time.strptime格式化实例详解
2021/02/03 Python
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
旷课检讨书1000字
2014/02/14 职场文书
国际贸易专业求职信
2014/06/04 职场文书
新闻发布会策划方案
2014/06/12 职场文书
欢迎横幅标语
2014/06/17 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
旷工检讨书大全
2015/08/15 职场文书