jquery 实现复选框的全选操作实例代码


Posted in Javascript onJanuary 24, 2017

jquery 实现复选框的全选操作实例代码

最近做了个需求,需要实现列表复选框的全选/取消全选操作,由于之前对这块不是很了解,所以从网上查了一些资料,虽然有各种实现方法,但没找到直接可以套用的。自己琢磨了下,把功能实现,整理如下。

实现细节如有可改进的地方,不吝赐教。

首先是html部分的代码,这里有一个表格,表格里面有一些选项:

<div id="list"> 
  <table> 
    <tr><td>选项1<input type="checkbox" name="group" value="1"/></tr> 
    <tr><td>选项2<input type="checkbox" name="group" value="2"/></tr> 
    <tr><td>选项3<input type="checkbox" name="group" value="3"/></tr> 
  </table> 
</div>
全选<input type="checkbox" id="all"/> 

接下来是jquery:

<script> 
$(document).ready(function () { 
  //全选或全不选 
  $("#all").click(function () { 
    if (this.checked) { 
      $("#list :checkbox").attr("checked", true); 
    } else { 
      $("#list :checkbox").attr("checked", false); 
    } 
  }); 
  //设置全选复选框 
  $("#list :checkbox").click(function () { 
    allchk(); 
  }); 
  function allchk() { 
    var chknum = $("#list :checkbox").size();//选项总个数 
    var chk = 0; 
    $("#list :checkbox").each(function () { 
      if ($(this).attr("checked")) { 
        chk++; 
      } 
    }); 
    if (chknum == chk) {//全选 
      $("#all").attr("checked", true); 
    } else {//不全选 
      $("#all").attr("checked", false); 
    } 
  } 
  //显示时执行一次 
  allchk(); 
}); 
</script>

当全选框被点击时,判断选中状态,如果是选中,则为所有选项的复选框设置选中属性;如果是取消选中,则为所有选项的复选框取消选中属性。

同时,为每个选项复选框添加判断,当所有的选项复选框都选中时,全选框自动选中;否则,全选框取消选中。这里通过计数来比较(选项的数量和选中的选项数量),通过each方法来进行遍历。

最后,在显示时执行一次,这是确保如果初始状态就是所有选项都选中的状态,要保证全选框也是选中的状态。

参考:jquery中checkbox使用方法简单实例演示

Javascript 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
JS日历 推荐
Dec 03 Javascript
JavaScript 定义function的三种方式小结
Oct 16 Javascript
监控 url fragment变化的js代码
Apr 19 Javascript
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
使用ExtJS技术实现的拖动树结点
Aug 05 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 #Javascript
js实现日历的简单算法
Jan 24 #Javascript
JSON键值对序列化和反序列化解析
Jan 24 #Javascript
js自制图片放大镜功能
Jan 24 #Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 #Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 #Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 #Javascript
You might like
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
php实现水仙花数示例分享
2014/04/03 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
python 中的列表解析和生成表达式
2011/03/10 Python
python创建线程示例
2014/05/06 Python
Python的面向对象思想分析
2015/01/14 Python
Python中处理unchecked未捕获异常实例
2015/01/17 Python
Python队列的定义与使用方法示例
2017/06/24 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
生物科学专业个人求职信范文
2013/12/05 职场文书
团工委书记自荐书范文
2013/12/17 职场文书
农民工创业典型事迹
2014/01/25 职场文书
社区工作者感言
2014/03/02 职场文书
财务担保书范文
2014/04/02 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
撤诉书怎么写
2015/05/19 职场文书
党组织结对共建协议书
2016/03/23 职场文书
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript