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面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
js简单实现竖向tab选项卡的方法
May 04 Javascript
谈一谈javascript闭包
Jan 28 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 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
学习使用curl采集curl使用方法
2012/01/11 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
如何开发一个JQuery插件
2016/07/28 面试题
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
2014年学生会工作总结
2014/11/07 职场文书
作文批改评语
2014/12/25 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
MySQL 十大常用字符串函数详解
2021/06/30 MySQL