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的ajax实现二级联动效果
Jul 13 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
详解jQuery中的easyui
Sep 02 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
Jquery ajax书写方法代码实例解析
Jun 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 遍历XP文件夹下所有文件
2008/11/27 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
tab栏切换原理
2017/03/22 Javascript
react-router实现按需加载
2017/05/09 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
python使用Tkinter显示网络图片的方法
2015/04/24 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
详解python和matlab的优势与区别
2019/06/28 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
Django 解决由save方法引发的错误
2020/05/21 Python
pytorch中index_select()的用法详解
2021/01/06 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
加热夹克:RAVEAN
2018/10/19 全球购物
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
《三顾茅庐》教学反思
2014/04/10 职场文书
商业项目策划方案
2014/06/05 职场文书
消防安全标语
2014/06/07 职场文书
工作简报格式范文
2015/07/21 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python