Dropdown Menu with Checkbox

     <script> $(".chkbox-menu").on("change", "input[type='checkbox']", function() { $(this).closest("li").toggleClass("active", this.checked); }); $(document).on('click', '.allow-focus', function (e) { e.stopPropagation(); }); </script> <style> .chkbox-menu li label { display: block; padding: 3px 10px; clear: both; font-weight: normal; line-height: 1.42857143; color: #333; white-space: nowrap; margin:0; transition: background-color .4s ease; } .chkbox-menu li input { margin: 0px 5px; top: 2px; position: relative; } .chkbox-menu li.active label { background-color: #cbcbff; font-weight:bold; } .chkbox-menu li label:hover, .chkbox-menu li label:focus { background-color: #f5f5f5; } .chkbox-menu li.active label:hover, .chkbox-menu li.active label:focus { background-color: #b8b8ff; } </style> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="DDMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown Menu <span class="caret"></span> </button> <ul class="dropdown-menu chkbox-menu allow-focus" aria-labelledby="DDMenu"> <li > <label> <input type="checkbox"> Item 1 </label> </li> <li > <label> <input type="checkbox"> Item 2 </label> </li> <li > <label> <input type="checkbox"> Item 3 </label> </li> </ul> </div>