jQuery实现checkbox全选功能完整实例


Posted in jQuery onJuly 12, 2018

本文实例讲述了jQuery实现checkbox全选功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>3water.com jQuery实现checkBox全选</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
  /*
  *统一设置所有条目的
  */
  function setItemCheckBox(flag) {
    $(":checkbox[name=checkboxBtn]").prop("checked",flag);
  }
  $(function () {
    //点击全选
    $("#selectAll").click(function(){
      //1.获取全选的状态
      var flag = this.checked;//获取全选的状态
      if(flag){
        $(this).prop("checked", true);
      }else{
        $(this).prop("checked", false);
      }
      //var flag = $(":checkbox[name=selectAll]").attr("checked");//jquery-1.5.1的用法
      //2.让所有条目的复选框与全选的状态同步
      //alert(flag);
      setItemCheckBox(flag);
    });
    //给所有复选框添加事件
    $(":checkbox[name=checkboxBtn]").click(function(){
      var flagV = this.checked;
      if(flagV){
        $(this).prop("checked", true);
      }else{
        $(this).prop("checked", false);
      }
      //获取所有复选框的个数
      var len = $(":checkbox[name=checkboxBtn]").length;
      //获取所有被选中的复选框的个数
      var checked_len = $(":checkbox[name=checkboxBtn]:checked").length;
      if(len == checked_len){
        //alert("全选中了");
        $("#selectAll").prop("checked",true);
      } else if(checked_len == 0) {
        $("#selectAll").prop("checked",false);
      } else {
        $("#selectAll").prop("checked",false);
      }
    });
  });
</script>
<body>
<div id="songList">
  <input type="checkbox" value="歌曲1" name="checkboxBtn"/>歌曲1<br />
  <input type="checkbox" value="歌曲2" name="checkboxBtn"/>歌曲2<br />
  <input type="checkbox" value="歌曲3" name="checkboxBtn"/>歌曲3<br />
</div>
<input type="checkbox" id="selectAll" name="selectAllBtn"/>全选<br />
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun运行测试效果如下:

jQuery实现checkbox全选功能完整实例

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 #jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 #jQuery
jQuery插件实现弹性运动完整示例
Jul 07 #jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 #jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 #jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 #jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 #jQuery
You might like
索尼ICF-SW100收音机评测
2021/03/02 无线电
深入PHP异步执行的详解
2013/06/03 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
js函数调用的方式
2014/05/06 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
Underscore源码分析
2015/12/30 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
jQuery EasyUI Draggable拖动组件
2017/03/01 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
白宫黑市官网:White House Black Market
2016/11/17 全球购物
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
高考备战决心书
2014/03/11 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
群众路线对照检查材料
2014/09/22 职场文书
Java异常处理try catch的基本用法
2021/12/06 Java/Android