Skip to content

Instantly share code, notes, and snippets.

@ewenchou

ewenchou/Twitter Bootstrap_multi_select_dropdown.html

Forked from jculverwell/Twitter Bootstrap_multi_select_dropdown.html
Last active December 15, 2015 11:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ewenchou/5256431 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ewenchou/5256431 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ewenchou revised this gist Mar 27, 2013. 1 changed file with 64 additions and 55 deletions.
    119 changes: 64 additions & 55 deletions Twitter Bootstrap_multi_select_dropdown.html
    View file
    Original file line number Diff line number Diff line change
    @@ -8,21 +8,77 @@
    <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;
    $(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) {
    @@ -32,59 +88,12 @@
    // $(this).find("span").toggleClass("icon-ok");
    // return false;
    // });

    /* To check whether an item is checked use the hasClass method */
    // alert($("#chkB").hasClass("checked"));

    });




    </script>

    <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="chkB" class="multicheck" href="#">Test B
    <span class="pull-right icon-check-empty"></span></a>
    </li>
    <li><a id="chkC" class="multicheck" href="#">Test C
    <span class="pull-right icon-check-empty"></span></a>
    </li>
    <li><a id="chkD" class="multicheck" href="#">Test D
    <span class="pull-right icon-check-empty"></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>

    </body>
    </html>
  2. ewenchou revised this gist Mar 27, 2013. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions Twitter Bootstrap_multi_select_dropdown.html
    View file
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,7 @@
    // 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));
    $('#chk-cnt').html($('.multicheck.checked').length);
    return false;
    });
    /* Single Select - allow only one selection */
    @@ -34,7 +34,7 @@
    // });

    /* To check whether an item is checked use the hasClass method */
    alert($("#chkB").hasClass("checked"));
    // alert($("#chkB").hasClass("checked"));

    });

    @@ -48,7 +48,7 @@

    <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>
    <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>
  3. ewenchou revised this gist Mar 27, 2013. 1 changed file with 14 additions and 8 deletions.
    22 changes: 14 additions & 8 deletions Twitter Bootstrap_multi_select_dropdown.html
    View file
    Original file line number Diff line number Diff line change
    @@ -19,6 +19,8 @@
    // 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;
    });
    /* Single Select - allow only one selection */
    @@ -46,16 +48,20 @@

    <ul class="nav">
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Multi Select<b class="caret"></b></a>
    <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"></span></a></li>
    <li><a id="chkB" class="multicheck checked" href="#">Test B
    <span class="icon-ok pull-right"></span></a></li>
    <li><a id="chkC" class="multicheck checked" href="#">Test C
    <span class="icon-ok pull-right"></span></a></li>
    <li><a id="chkD" class="multicheck checked" href="#">Test D
    <span class="icon-check pull-right"></span></a></li>
    <span class="pull-right icon-check-empty"></span></a>
    </li>
    <li><a id="chkB" class="multicheck" href="#">Test B
    <span class="pull-right icon-check-empty"></span></a>
    </li>
    <li><a id="chkC" class="multicheck" href="#">Test C
    <span class="pull-right icon-check-empty"></span></a>
    </li>
    <li><a id="chkD" class="multicheck" href="#">Test D
    <span class="pull-right icon-check-empty"></span></a>
    </li>
    <div class="clearfix"></div>
    </ul>
    </li>
  4. ewenchou revised this gist Mar 27, 2013. 1 changed file with 14 additions and 10 deletions.
    24 changes: 14 additions & 10 deletions Twitter Bootstrap_multi_select_dropdown.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,6 +3,7 @@
    <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>
    @@ -15,18 +16,20 @@
    /* Toggle checked state and icon */
    $('.multicheck').click(function(e) {
    $(this).toggleClass("checked");
    $(this).find("span").toggleClass("icon-ok");
    // 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");
    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;
    });
    // $('.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"));
    @@ -52,10 +55,11 @@
    <li><a id="chkC" class="multicheck checked" href="#">Test C
    <span class="icon-ok pull-right"></span></a></li>
    <li><a id="chkD" class="multicheck checked" href="#">Test D
    <span class="icon-ok pull-right"></span></a></li>
    <span class="icon-check pull-right"></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">
    @@ -70,7 +74,7 @@
    <div class="clearfix"></div>
    </ul>
    </li>

    -->
    </ul>

    </div>
  5. @jculverwell jculverwell revised this gist Oct 25, 2012. 1 changed file with 28 additions and 2 deletions.
    30 changes: 28 additions & 2 deletions Twitter Bootstrap_multi_select_dropdown.html
    View file
    Original file line number Diff line number Diff line change
    @@ -10,13 +10,24 @@

    <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");
    $(this).find("span").toggleClass("icon-ok");
    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"));

    @@ -32,7 +43,7 @@

    <ul class="nav">
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Multi Select<b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li><a id="chkA" class="multicheck" href="#">Test A
    <span class="pull-right"></span></a></li>
    @@ -45,10 +56,25 @@
    <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>

    </body>
    </html>
    </html>
  6. @jculverwell jculverwell created this gist Oct 24, 2012.
    54 changes: 54 additions & 0 deletions Twitter Bootstrap_multi_select_dropdown.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,54 @@
    <!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" />
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
    <meta charset=utf-8 />
    </head>
    <body>

    <script type="text/javascript">
    $(document).ready(function() {
    /* Allow click without closing menu */
    /* Toggle checked state and icon */
    $('.multicheck').click(function(e) {
    $(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>

    <div class="navbar">
    <div class="navbar-inner">

    <ul class="nav">
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li><a id="chkA" class="multicheck" href="#">Test A
    <span class="pull-right"></span></a></li>
    <li><a id="chkB" class="multicheck checked" href="#">Test B
    <span class="icon-ok pull-right"></span></a></li>
    <li><a id="chkC" class="multicheck checked" href="#">Test C
    <span class="icon-ok pull-right"></span></a></li>
    <li><a id="chkD" class="multicheck checked" href="#">Test D
    <span class="icon-ok pull-right"></span></a></li>
    <div class="clearfix"></div>
    </ul>
    </li>
    </ul>

    </div>
    </div>

    </body>
    </html>