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 EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
jQuery实现动态向上滚动
Dec 21 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判断变量的函数
2012/04/24 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
python+logging+yaml实现日志分割
2019/07/22 Python
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
仓库管理专业个人自我评价范文
2013/11/11 职场文书
劳资专员岗位职责
2013/12/27 职场文书
高三学生评语大全
2014/04/25 职场文书
应届生面试求职信
2014/07/02 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
教师个人学习总结
2015/02/11 职场文书
关爱空巢老人感想
2015/08/11 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
详解Oracle块修改跟踪功能
2021/11/07 Oracle
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
MySQL存储过程及语法详解
2022/08/05 MySQL