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 ui sortable拖拽后保存位置
Apr 27 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jQuery实现简单三级联动效果
Sep 05 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
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python CSV模块使用实例
2015/04/09 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
python 堆和优先队列的使用详解
2019/03/05 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
django如何通过类视图使用装饰器
2019/07/24 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
Keras实现DenseNet结构操作
2020/07/06 Python
python利用faker库批量生成测试数据
2020/10/15 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
财产公证书样本
2014/04/04 职场文书
岗位工作说明书
2014/07/29 职场文书
学生会个人总结范文
2015/02/15 职场文书
2015年女生节活动总结
2015/02/27 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
python ansible自动化运维工具执行流程
2021/06/24 Python
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL