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

前言

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

效果是这样：

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

示例代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。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/Content charset=utf-8 '/link rel='样式表href=' lib/bootstrap。量滴CSS ' rel='外部nofollow'/link rel='样式表href='style.css' rel='外部nofollow'/style type='text/css ' .下拉菜单{宽度： 500像素高度： 170像素；padd : 0；} .下拉菜单。全部{宽度： 100%；高度： 44px背景-颜色： # f9fa线高： 44px左填充： 10px} .下拉菜单输入[type=' checkbox ']{左边距： 20px}标签。复选框{显示：内嵌块；} .choose _ bank label { margin-bottom : 16px；}/style/head body div class=' BTN-group choose _ bank ' style=' height : 22px；'button class=' BTN BTN-mini ' style=' padd : 0；宽度： 120像素；背景-color : # fff；border: 1px实心#ccc '全部/button button class=' BTN BTN-迷你下拉-切换'数据-切换='下拉' style=' height : 22px ' span class=' caret '/span/button div class='下拉-菜单' label class=' all '输入类型=' checkbox '全部/标签标签输入类型='复选框'工商银行/标签标签输入类型='复选框'农业银行/标签标签输入类型='复选框'中国银行/标签标签输入类型='复选框'建设银行/标签标签输入类型='复选框'交通银行/标签标签输入类型='复选框'邮政银行/标签标签输入类型='复选框'招商银行/标签标签输入类型='复选框'中信银行/标签标签输入类型='复选框'民生银行/标签标签输入类型='复选框'光大银行/标签标签输入类型='复选框'平安银行/标签标签输入类型='复选框'北京银行/label/div/div/body脚本src=' http : lib/jquery。量滴js '/script script src=' http : lib/bootstrap。量滴js '/脚本var banks=$().全部').兄弟姐妹()。儿童();$('.所有输入').单击(function() { var flag=$(this)).道具('选中');banks.prop('checked '，flag)；})banks.click(function() { //如果有一个没选中，全选按钮不选中//如果全部选中，全选按钮被选中var num=0；银行。每个(函数(){ if($(this)).prop(' checked '){ num；} }) if (num==banks.length) { $(' .所有输入').prop('checked '，true)；} else { $(' .所有输入').prop('checked '，false)；} })/脚本/html总结

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