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 相关文章推荐
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
子窗体与父窗体传值示例js代码
Aug 01 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
5 种JavaScript编码规范
Jan 30 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 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 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
学习python处理python编码问题
2011/03/13 Python
python套接字流重定向实例汇总
2016/03/03 Python
Python中类型检查的详细介绍
2017/02/13 Python
Python_LDA实现方法详解
2017/10/25 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
Python3并发写文件与Python对比
2019/11/20 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
北京某公司的.net笔试题
2014/03/20 面试题
六年级数学教学反思
2014/02/03 职场文书
运动会邀请函范文
2014/02/06 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
反腐倡廉标语
2014/06/24 职场文书
促销活动总结怎么写
2014/06/25 职场文书
客房部经理岗位职责
2015/02/02 职场文书
廉政承诺书范文
2015/04/28 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python
python超详细实现完整学生成绩管理系统
2022/03/17 Python