Forked from jculverwell/Twitter Bootstrap_multi_select_dropdown.html
Last active
December 15, 2015 11:58
-
-
Save ewenchou/5256431 to your computer and use it in GitHub Desktop.
Update GIST with nicer checkbox icons using Font Awesome. Added a "X Selected" counter on the dropdown to give feedback to user when dropdown list is hidden.
Added "Select All" and "Select None" choices in the dropdown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://code.jquery.com/jquery.min.js"></script> | |
| <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> | |
| <link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet"> | |
| <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script> | |
| <meta charset=utf-8 /> | |
| </head> | |
| <body> | |
| <div class="navbar"> | |
| <div class="navbar-inner"> | |
| <ul class="nav"> | |
| <li class="dropdown"> | |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span id="chk-cnt">0</span> Selected <b class="caret"></b></a> | |
| <ul class="dropdown-menu"> | |
| <li><a id="chkA" class="multicheck" href="#">Test A <span class="pull-right icon-check-empty"></span></a></li> | |
| <li><a id="chkA" class="multicheck" href="#">Test A <span class="pull-right icon-check-empty"></span></a></li> | |
| <li><a id="chkA" class="multicheck" href="#">Test A <span class="pull-right icon-check-empty"></span></a></li> | |
| <li><a id="chkA" class="multicheck" href="#">Test A <span class="pull-right icon-check-empty"></span></a></li> | |
| <li><a id="chkAll" href="#">Select All <span class="pull-right icon-ok-sign"></span></a></li> | |
| <li><a id="chkNone" href="#">Select None <span class="pull-right icon-remove"></span></a></li> | |
| <div class="clearfix"></div> | |
| </ul> | |
| </li> | |
| <!-- | |
| <li class="dropdown"> | |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown">Single Select<b class="caret"></b></a> | |
| <ul class="dropdown-menu"> | |
| <li><a id="chkA" class="singlecheck" href="#">Test A | |
| <span class="pull-right"></span></a></li> | |
| <li><a id="chkB" class="singlecheck checked" href="#">Test B | |
| <span class="icon-ok pull-right"></span></a></li> | |
| <li><a id="chkC" class="singlecheck checked" href="#">Test C | |
| <span class="icon-ok pull-right"></span></a></li> | |
| <li><a id="chkD" class="singlecheck checked" href="#">Test D | |
| <span class="icon-ok pull-right"></span></a></li> | |
| <div class="clearfix"></div> | |
| </ul> | |
| </li> | |
| --> | |
| </ul> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| $(document).ready(function() { | |
| /* Multi select - allow multiple selections */ | |
| /* Allow click without closing menu */ | |
| /* Toggle checked state and icon */ | |
| $('.multicheck').click(function(e) { | |
| $(this).toggleClass("checked"); | |
| // Toggle the icon-check and icon-check-empty classes. | |
| // The span has to have one of those classes initially to work. | |
| $(this).find("span").toggleClass("icon-check icon-check-empty"); | |
| // Update the selected count | |
| $('#chk-cnt').html($('.multicheck.checked').length); | |
| return false; | |
| }); | |
| // Select All | |
| $('#chkAll').click(function(e) { | |
| $('.multicheck').each(function(index, element) { | |
| $(this).addClass("checked"); | |
| $(this).find("span").addClass('icon-check').removeClass('icon-check-empty'); | |
| }); | |
| $('#chk-cnt').html($('.multicheck.checked').length); | |
| return false; | |
| }); | |
| // Select NOne | |
| $('#chkNone').click(function(e) { | |
| $('.multicheck').each(function(index, element) { | |
| $(this).removeClass("checked"); | |
| $(this).find("span").removeClass('icon-check').addClass('icon-check-empty'); | |
| }); | |
| $('#chk-cnt').html($('.multicheck.checked').length); | |
| return false; | |
| }); | |
| /* Single Select - allow only one selection */ | |
| /* Toggle checked state and icon and also remove any other selections */ | |
| // $('.singlecheck').click(function (e) { | |
| // $(this).parent().siblings().children().removeClass("checked"); | |
| // $(this).parent().siblings().children().find("span").removeClass("icon-ok"); | |
| // $(this).toggleClass("checked"); | |
| // $(this).find("span").toggleClass("icon-ok"); | |
| // return false; | |
| // }); | |
| /* To check whether an item is checked use the hasClass method */ | |
| // alert($("#chkB").hasClass("checked")); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment