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插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery实现弹幕特效
Nov 29 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
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
python 实现有道翻译功能
2021/02/26 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
运动会领导邀请函
2014/01/10 职场文书
工作时间上网检讨书
2014/02/03 职场文书
生日宴会主持词
2014/03/20 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
社会工作专业自荐信
2014/09/26 职场文书
三八妇女节寄语
2015/02/27 职场文书
数学教师求职信范文
2015/03/20 职场文书
导师工作推荐信
2015/03/27 职场文书
个人维稳承诺书
2015/05/04 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
《给予树》教学反思
2016/03/03 职场文书
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android