<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-lg-12"> <h2>Button Dropdown with Checkboxes</h2> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button> <ul class="dropdown-menu"> <li> <a href="#">Link 2</a> </li> <li> <label class="dropdown-menu-item checkbox"> <input type="checkbox" /> <span class="glyphicon glyphicon-unchecked"></span> Apple </label> </li> <li> <label class="dropdown-menu-item checkbox"> <input type="checkbox" /> <span class="glyphicon glyphicon-unchecked"></span> Banana </label> </li> <li> <label class="dropdown-menu-item checkbox"> <input type="checkbox" /> <span class="glyphicon glyphicon-unchecked"></span> Orange </label> </li> <li role="separator" class="divider"></li> <li> <button class="btn btn-link dropdown-menu-item"> <span class="glyphicon glyphicon-globe"></span> Globe </button> </li> </ul> </div> </div> </div> </div>

.dropdown-menu > li > .dropdown-menu-item { clear: both; color: #333; display: block; padding: 3px 20px; white-space: nowrap; margin: 5px 0; width: 100%; text-align: left; text-decoration: none; outline: none; cursor: pointer; -moz-user-select: none; user-select: none; } .dropdown-menu > li:hover .dropdown-menu-item, .dropdown-menu > li:focus .dropdown-menu-item{ background-color: #f5f5f5; color: #262625; } .dropdown-menu > li > .dropdown-menu-item.checkbox { margin: 0; font-weight: normal; } .dropdown-menu > li > .dropdown-menu-item.checkbox input { display: none; }

$(function(){ $( '.dropdown-menu li' ).on( 'click', function( event ) { var $checkbox = $(this).find('.checkbox'); if (!$checkbox.length) { return; } var $input = $checkbox.find('input'); var $icon = $checkbox.find('span.glyphicon'); if ($input.is(':checked')) { $input.prop('checked',false); $icon.removeClass('glyphicon-check').addClass('glyphicon-unchecked') } else { $input.prop('checked',true); $icon.removeClass('glyphicon-unchecked').addClass('glyphicon-check') } return false; }); });