<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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" style="margin-top:20px;"> <div class="row"> <div class="col-xs-6"> <h3 class="text-center">Basic Example</h3> <div class="well" style="max-height: 300px;overflow: auto;"> <ul class="list-group checked-list-box"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item" data-checked="true">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </div> </div> <div class="col-xs-6"> <h3 class="text-center">Colorful Example</h3> <div class="well" style="max-height: 300px;overflow: auto;"> <ul class="list-group checked-list-box"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item" data-color="success">Dapibus ac facilisis in</li> <li class="list-group-item" data-color="info">Morbi leo risus</li> <li class="list-group-item" data-color="warning">Porta ac consectetur ac</li> <li class="list-group-item" data-color="danger">Vestibulum at eros</li> </ul> </div> </div> </div> <div class="row"> <div class="col-xs-6"> <h3 class="text-center">Using Button Style's</h3> <div class="well" style="max-height: 300px;overflow: auto;"> <ul class="list-group checked-list-box"> <li class="list-group-item" data-style="button">Cras justo odio</li> <li class="list-group-item" data-style="button" data-color="success">Dapibus ac facilisis in</li> <li class="list-group-item" data-style="button" data-color="info">Morbi leo risus</li> <li class="list-group-item" data-style="button" data-color="warning">Porta ac consectetur ac</li> <li class="list-group-item" data-style="button" data-color="danger">Vestibulum at eros</li> </ul> </div> </div> <div class="col-xs-6"> <h3 class="text-center">Just a Small Party</h3> <div class="well" style="max-height: 300px;overflow: auto;"> <ul class="list-group checked-list-box"> <li class="list-group-item" data-style="button">Cras justo odio</li> <li class="list-group-item" data-color="success">Dapibus ac facilisis in</li> <li class="list-group-item" data-style="button" data-color="info">Morbi leo risus</li> <li class="list-group-item" data-color="warning">Porta ac consectetur ac</li> <li class="list-group-item" data-style="button" data-color="danger">Vestibulum at eros</li> </ul> </div> </div> </div> </div>

/* CSS REQUIRED */ .state-icon { left: -5px; } .list-group-item-primary { color: rgb(255, 255, 255); background-color: rgb(66, 139, 202); } /* DEMO ONLY - REMOVES UNWANTED MARGIN */ .well .list-group { margin-bottom: 0px; }

$(function () { $('.list-group.checked-list-box .list-group-item').each(function () { // Settings var $widget = $(this), $checkbox = $('<input type="checkbox" class="hidden" />'), color = ($widget.data('color') ? $widget.data('color') : "primary"), style = ($widget.data('style') == "button" ? "btn-" : "list-group-item-"), settings = { on: { icon: 'glyphicon glyphicon-check' }, off: { icon: 'glyphicon glyphicon-unchecked' } }; $widget.css('cursor', 'pointer') $widget.append($checkbox); // Event Handlers $widget.on('click', function () { $checkbox.prop('checked', !$checkbox.is(':checked')); $checkbox.triggerHandler('change'); updateDisplay(); }); $checkbox.on('change', function () { updateDisplay(); }); // Actions function updateDisplay() { var isChecked = $checkbox.is(':checked'); // Set the button's state $widget.data('state', (isChecked) ? "on" : "off"); // Set the button's icon $widget.find('.state-icon') .removeClass() .addClass('state-icon ' + settings[$widget.data('state')].icon); // Update the button's color if (isChecked) { $widget.addClass(style + color + ' active'); } else { $widget.removeClass(style + color + ' active'); } } // Initialization function init() { if ($widget.data('checked') == true) { $checkbox.prop('checked', !$checkbox.is(':checked')); } updateDisplay(); // Inject the icon if applicable if ($widget.find('.state-icon').length == 0) { $widget.prepend('<span class="state-icon ' + settings[$widget.data('state')].icon + '"></span> '); } } init(); }); });