bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果


Posted in jQuery onJune 12, 2017

前言

最近几天在公司做了个后台管理系统的小模块,其中有个功能是实现复选框的全选和全不选,用bootstrap和jQuery来实现。

效果是这样:

bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果

因为是内部用,样式也不要求太好看,直接上代码。

示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <META content="IE=11.0000" http-equiv="X-UA-Compatible">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="lib/bootstrap.min.css" rel="external nofollow" />
  <link rel="stylesheet" href="style.css" rel="external nofollow" />
  <style type="text/css">
  .dropdown-menu {
    width: 500px;
    height: 170px;
    padding: 0;
  }

  .dropdown-menu .all {
    width: 100%;
    height: 44px;
    background-color: #f9f9fa;
    line-height: 44px;
    padding-left: 10px;
  }

  .dropdown-menu input[type="checkbox"] {
    margin-left: 20px;
  }

  label.checkbox {
    display: inline-block;
  }

  .choose_bank label {
    margin-bottom: 16px;
  }
  </style>
</head>

<body>
  <div class="btn-group choose_bank" style="height: 22px;">
    <button class="btn btn-mini" style="padding: 0;width: 120px;background-color: #fff;border: 1px solid #ccc">全部</button>
    <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown" style="height: 22px">
      <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
      <label class="all">
        <input type="checkbox"> 全部
      </label>
      <label>
        <input type="checkbox"> 工商银行
      </label>
      <label>
        <input type="checkbox"> 农业银行
      </label>
      <label>
        <input type="checkbox"> 中国银行
      </label>
      <label>
        <input type="checkbox"> 建设银行
      </label>
      <label>
        <input type="checkbox"> 交通银行
      </label>
      <label>
        <input type="checkbox"> 邮政银行
      </label>
      <label>
        <input type="checkbox"> 招商银行
      </label>
      <label>
        <input type="checkbox"> 中信银行
      </label>
      <label>
        <input type="checkbox"> 民生银行
      </label>
      <label>
        <input type="checkbox"> 光大银行
      </label>
      <label>
        <input type="checkbox"> 平安银行
      </label>
      <label>
        <input type="checkbox"> 北京银行
      </label>
    </div>
  </div>
</body>
<script src="lib/jquery.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script>
var banks = $('.all').siblings().children();
$('.all>input').click(function() {
  var flag = $(this).prop('checked');
  banks.prop('checked', flag);
})
banks.click(function() {
  // 如果有一个没选中,全选按钮不选中
  // 如果全部选中,全选按钮被选中
  var num = 0;
  banks.each(function() {
    if ($(this).prop("checked")) {
      num++;
    }
  })
  if (num == banks.length) {
    $('.all>input').prop('checked', true);
  } else {
    $('.all>input').prop('checked', false);
  }
})
</script>

</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

jQuery 相关文章推荐
基于jquery实现二级联动效果
Mar 30 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
jQuery实现简单QQ聊天框
Aug 27 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 #jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 #jQuery
jquery与js实现全选功能的区别
Jun 11 #jQuery
jQuery 表单序列化实例代码
Jun 11 #jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 #jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 #jQuery
jQuery复合事件用法示例
Jun 10 #jQuery
You might like
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
YII框架常用技巧总结
2019/04/27 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
python实现简单登陆系统
2018/10/18 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
python读写文件write和flush的实现方式
2020/02/21 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
AJAX的优缺点都有什么
2015/08/18 面试题
统计岗位职责
2014/02/21 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书
小学生学习保证书
2015/02/26 职场文书
家长意见书
2015/06/04 职场文书
python 如何用terminal输入参数
2021/05/25 Python
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS