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 相关文章推荐
jQuery中map函数的两种方式
Apr 07 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 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
php 伪静态之IIS篇
2014/06/02 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
学习YUI.Ext基础第一天
2007/03/10 Javascript
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
JavaScript中常见陷阱小结
2010/04/27 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
python实现排序算法
2014/02/14 Python
Python实现CET查分的方法
2015/03/10 Python
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
Python中字典的基本知识初步介绍
2015/05/21 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
手工社团活动方案
2014/02/17 职场文书
残疾人小组计划书
2014/04/27 职场文书
美术专业自荐信
2014/07/07 职场文书
个人总结与自我评价
2014/09/18 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL