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对象是否可用的最正确方法分析
Oct 03 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
js date 格式化
Feb 15 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
Vue实现Header渐隐渐现效果的实例代码
Nov 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
玩转虚拟域名◎+ .
2006/10/09 PHP
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
php微信开发之关注事件
2018/06/14 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
python将人民币转换大写的脚本代码
2013/02/10 Python
python多重继承新算法C3介绍
2014/09/28 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
中科方德软件测试面试题
2016/04/21 面试题
八一建军节感言
2014/02/28 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
2014年度培训工作总结
2014/11/27 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
还款承诺书范本
2015/01/20 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
优质护理心得体会
2016/01/22 职场文书
《鲸》教学反思
2016/02/23 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python