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

更新时间：2018年07月04日 11:40:39 作者：cat_pp

这篇文章主要介绍了jQuery实现table表格checkbox全选的方法,结合实例形式分析了jQuery事件响应与元素遍历实现table表格checkbox元素状态动态修改相关操作技巧,需要的朋友可以参考下

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

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

具体的实现过程很简单：

第一步

设计一个简单的表格：

设置表格列标题，在列标题中的单选框为全选框；

设置表格题，表格题的单选框就是普通的单选框啦：

<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表格(table)操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

基于jquery自己写tab滑动门(通用版)
今天与大家分享一下，自己写的滑动门。在网上也搜索了一下，没发现比较好的，于是乎自己写一吧~写起来也很简单，为了方便使用，我已经尽量封装好了。好吧，闲话少说，直接上代码吧
2012-10-10
jquery仿微信聊天界面
这篇文章主要为大家详细介绍了jquery仿微信聊天界面的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
JQuery 选择器、过滤器介绍
使用过AJAX技术的人都知道大名鼎鼎的JQuery。虽然我来学习之前有看过AJAX的视频，但那时对WEB应用这个东西还比较模糊，不清楚HTML、JSP与Servlet是怎么工作的，甚至不知道JQuery包装的是什么东西。
2011-02-02
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
这篇文章主要介绍了一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子,需要的朋友可以参考下
2014-06-06
jQuery实现表单动态添加数据并提交的方法
这篇文章主要介绍了jQuery实现表单动态添加数据并提交的方法,结合实例形式总结分析了jQuery针对存在form表单的添加、提交,不存在form表单的添加、提交,ajax、非ajax形式提交等数据添加与表单提交操作技巧,需要的朋友可以参考下
2018-07-07
jquery实现可旋转可拖拽的文字效果代码
这篇文章主要介绍了jquery实现可旋转可拖拽的文字效果代码,涉及jquery响应鼠标事件动态操作页面元素样式的相关技巧,需要的朋友可以参考下
2016-01-01
jQuery实现带动画效果的二级下拉导航方法
这篇文章主要介绍了jQuery实现带动画效果的二级下拉导航方法,涉及jQuery操作css样式及鼠标事件的技巧,非常具有实用价值,需要的朋友可以参考下
2015-03-03
jquery多浏览器捕捉回车事件代码
最近我们网站做一个合作项目要求在页面中捕捉回车事件，经过好多测试找到这个
2010-06-06
jquery实现的判断倒计时是否结束代码
在一些购物网站经常会遇到倒计时的功能，例如某些商品在一定期限内搞活动，下面小编给大家分享一段代码关于jquery实现的判断倒计时是否结束代码，希望对大家有所帮助
2016-02-02
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
这篇文章主要介绍了jQuery实现的指纹扫描效果,以完整实例形式分析了jQuery实现图像按照指定模式显示的相关实现技巧,并附带附示例演示与demo源码供读者下载参考,需要的朋友可以参考下
2016-01-01

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具