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 dataTable 获取某行数据
May 05 jQuery
jquery仿微信聊天界面
May 06 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 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生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
基于jQuery的日期选择控件
2009/10/27 Javascript
JS与框架页的操作代码
2010/01/17 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
Python3多线程操作简单示例
2018/05/22 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
学期研究性学习个人的自我评价
2014/01/09 职场文书
剪彩仪式主持词
2014/03/19 职场文书
淘宝店策划方案
2014/06/07 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书
公司开会通知
2015/04/20 职场文书
python绘制箱型图
2021/04/27 Python
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS