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类定义例子
Sep 12 Javascript
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
javascript定时器完整实例
Feb 10 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
微信小程序实现图片压缩
Dec 03 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 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 mysql与mysqli事务使用说明 分享
2013/08/17 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
php基础教程
2015/08/26 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
使用python Django做网页
2013/11/04 Python
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
python中几种自动微分库解析
2019/08/29 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
python包的导入方式总结
2021/03/02 Python
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
甲方资料员岗位职责
2013/12/13 职场文书
财务会计自荐信范文
2014/02/21 职场文书
疾病捐款倡议书
2014/05/13 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
小学假期安全广播稿
2014/09/28 职场文书
2015年工商所工作总结
2015/05/21 职场文书
2015年教研工作总结
2015/05/23 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript