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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 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编写简单的文章发布程序
2015/06/18 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
Vue.js 父子组件通讯开发实例
2016/09/06 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
基于Vue实现微前端的示例代码
2020/04/24 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
你应该知道的python列表去重方法
2017/01/17 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
Python中GIL的使用详解
2018/10/03 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
学校文明单位申报材料
2014/05/06 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis