<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>Fancy Checkbox Buttons</h2> <div class="btn-group" role="group"> <label class="btn btn-default btn-checkbox"> <span class="glyphicon glyphicon-unchecked" data-icon-on="glyphicon glyphicon-check" data-icon-off="glyphicon glyphicon-unchecked"></span> <input name="checkbox" type="checkbox" value="ant" style="display: none" autocomplete="false"/> Ant </label> <label class="btn btn-default btn-checkbox"> <span class="glyphicon glyphicon-unchecked" data-icon-on="glyphicon glyphicon-check" data-icon-off="glyphicon glyphicon-unchecked"></span> <input name="radio" type="checkbox" value="bat" style="display: none" autocomplete="false"/> Bat </label> <label class="btn btn-default btn-checkbox"> <span class="glyphicon glyphicon-unchecked" data-icon-on="glyphicon glyphicon-check" data-icon-off="glyphicon glyphicon-unchecked"></span> <input name="checkbox[]" type="checkbox" value="cat" style="display: none" autocomplete="false"/> Cat </label> </div> </div> <div class="col-md-12"> <h2>Fancy Radio Buttons</h2> <div class="btn-group" role="group"> <label class="btn btn-default btn-checkbox"> <span class="glyphicon glyphicon-unchecked" data-icon-on="glyphicon glyphicon-check" data-icon-off="glyphicon glyphicon-unchecked"></span> <input name="radio" type="radio" value="ant" style="display: none" autocomplete="false"/> Ant </label> <label class="btn btn-default btn-checkbox"> <span class="glyphicon glyphicon-unchecked" data-icon-on="glyphicon glyphicon-check" data-icon-off="glyphicon glyphicon-unchecked"></span> <input name="radio" type="radio" value="bat" style="display: none" autocomplete="false"/> Bat </label> <label class="btn btn-default btn-checkbox"> <span class="glyphicon glyphicon-unchecked" data-icon-on="glyphicon glyphicon-check" data-icon-off="glyphicon glyphicon-unchecked"></span> <input name="radio" type="radio" value="cat" style="display: none" autocomplete="false"/> Cat </label> </div> </div> <div class="col-md-12"> <h2>Fancy Sort Order</h2> <div class="input-group"> <div class="form-control form-control-selectpicker"> <select class="selectpicker" name="sort" title="Sorting"> <option>Created</option> <option>Price</option> <option>Quantity</option> </select> </div> <div class="input-group-btn"> <label class="btn btn-default btn-checkbox"> <span class="glyphicon glyphicon-sort-by-attributes" data-icon-on="glyphicon glyphicon-sort-by-attributes-alt" data-icon-off="glyphicon glyphicon-sort-by-attributes"></span> <input name="order" type="radio" value="1" style="display: none" autocomplete="false"/> </label> </div> </div> </div> </div> </div>

.input-group .form-control.form-control-selectpicker { padding: 0; } .input-group .form-control.form-control-selectpicker > .btn-group.bootstrap-select { width: 100%; } .input-group .form-control.form-control-selectpicker .btn-group .btn { border: 0; }

$(function() { $('body').on('click','.btn-checkbox',function(e) { e.stopPropagation(); e.preventDefault(); var $checkbox = $(this).find(':input[type=checkbox]'); if ($checkbox.length) { var $icon = $(this).find('[data-icon-on]'); if ($checkbox.is(':checked')) { unchecked($checkbox); } else { checked($checkbox); } return; } var $radio = $(this).find(':input[type=radio]'); if ($radio.length) { var $group = $radio.closest('.btn-group'); $group.find(':input[type=radio]').not($radio).each(function(){ unchecked($(this)); }) var $icon = $(this).find('[data-icon-on]'); if ($radio.is(':checked')) { unchecked($radio); } else { checked($radio); } return; } }); }); function checked($input) { var $button = $input.closest('.btn'); var $icon = $button.find('[data-icon-on]'); $button.addClass('active'); $input.prop('checked', true); $icon.css('width',$icon.width()); $icon.removeAttr('class').addClass($icon.data('icon-on')); $input.trigger('change'); } function unchecked($input) { var $button = $input.closest('.btn'); var $icon = $button.find('[data-icon-on]'); $button.removeClass('active'); $input.prop('checked', false); $icon.css('width',$icon.width()); $icon.removeAttr('class').addClass($icon.data('icon-off')); $input.trigger('change'); }