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 相关文章推荐
javascript 面向对象编程基础:封装
Aug 21 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
Vue中v-for的数据分组实例
Mar 07 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
对vuex中getters计算过滤操作详解
Nov 06 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
解析原生JS getComputedStyle
May 25 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
PHP 日期加减的类,很不错
2009/10/10 PHP
php gzip压缩输出的实现方法
2013/04/27 PHP
php自定义分页类完整实例
2015/12/25 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
PDO::errorCode讲解
2019/01/28 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
js no-repeat写法 背景不重复
2009/03/18 Javascript
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
简单介绍Python中的JSON使用
2015/04/28 Python
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
python如何实时获取tcpdump输出
2020/09/16 Python
python实现二分查找算法
2020/09/18 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
eBay奥地利站:eBay.at
2019/07/24 全球购物
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
办公室文秘岗位职责
2013/11/15 职场文书
毕业生优秀推荐信
2013/11/26 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
农业生产宣传标语
2014/10/08 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
上帝也疯狂观后感
2015/06/09 职场文书