jQuery实现table表格checkbox全选的方法分析


Posted in jQuery onJuly 04, 2018

本文实例讲述了jQuery实现table表格checkbox全选的方法。分享给大家供大家参考,具体如下:

今天在页面中使用jQuery实现了全选框操作,如图:

jQuery实现table表格checkbox全选的方法分析

具体的实现过程很简单:

第一步

设计一个简单的表格:

设置表格列标题,在列标题中的单选框为全选框;

设置表格题,表格题的单选框就是普通的单选框啦:

<table>
    <thead>
      <tr>
        <td>
          <input type="checkbox" onclick="selectAll(this.checked)" />
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="checkbox" name="check" />
        </td>
        <td>
          <input type="checkbox" name="check" />
        </td>
        <td>
          <input type="checkbox" name="check" />
        </td>
      </tr>
    </tbody>
  </table>

第二步

通过jQuery实现当点击全选框的时候所有单选框都选中,当再次点击全选框的时候所有单选框都是未选中状态:

function selectAll(selectStatus){//传入参数(全选框的选中状态)
  //根据name属性获取到单选框的input,使用each方法循环设置所有单选框的选中状态
  if(selectStatus){
    $("input[name='check']").each(function(i,n){
      n.checked = true;
    });
  }else{
    $("input[name='check']").each(function(i,n){
      n.checked = false;
    });
  }
}

好啦,大功告成!

ps:亲们,不要忘了引入jQuery的js文件!

可使用cdn如:

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery replace方法去空格
May 08 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 #jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 #jQuery
jQuery阻止事件冒泡实例分析
Jul 03 #jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 #jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 #jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 #jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 #jQuery
You might like
PHP无敌近乎加密方式!
2010/07/17 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
matplotlib绘制动画代码示例
2018/01/02 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
python爬虫之遍历单个域名
2019/11/20 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
高级Java程序员面试题
2016/06/23 面试题
高校毕业生登记表自我鉴定
2013/11/03 职场文书
生产总经理岗位职责
2013/12/19 职场文书
求职信需要的五点内容
2014/02/01 职场文书
服装店营销方案
2014/03/10 职场文书
教师工作表现评语
2014/12/31 职场文书
培训通知
2015/04/17 职场文书
实习单位鉴定意见
2015/06/04 职场文书
推普标语口号大全
2015/12/26 职场文书