Built with blockbuilder.org
xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style></head><body> <br/><div class="container"> <div class="row"> <div class="col-lg-12"> <div class="button-group"> <button type="button" class="btn btn-danger btn-lg dropdown-toggle5" data-toggle="dropdown" style="width :150px; border-color: #d43f3a; border-width: 1px;">Zoom <span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button><ul class="dropdown-menu" style="width =200px border-color: #d43f3a; border-width: 3px;"> <li ><a href="#" class="small" data-value="option1" tabIndex="-1"> <input type="checkbox"/> Option 1889</a></li> <li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox"/> Option 2</a></li> <li><a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox"/> Option 3</a></li> <li><a href="#" class="small" data-value="option4" tabIndex="-1"><input type="checkbox"/> Option 4</a></li> <li><a href="#" class="small" data-value="option5" tabIndex="-1"><input type="checkbox"/> Option 5</a></li> <li><a href="#" class="small" data-value="option6" tabIndex="-1"><input type="checkbox"/> Option 6</a></li></ul> </div></div> </div></div> <script> // Feel free to change or delete any of the code you see in this editor! var options = [];$('.dropdown-menu a' ).on( 'click', function( event ) { var $target = $( event.currentTarget ), val = $target.attr( 'data-value' ), $inp = $target.find( 'input' ), idx; if ( ( idx = options.indexOf( val ) ) > -1 ) { options.splice( idx, 1 ); setTimeout( function() { $inp.prop( 'checked', false ) }, 0); } else { options.push( val ); setTimeout( function() { $inp.prop( 'checked', true ) }, 0); } $( event.target ).blur(); console.log( options ); return false;}); </script></body> https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js