"Checked List Group"
Bootstrap 3.1.0 Snippet by mouse0270

<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 id="check-list-box" 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> <br /> <button class="btn btn-primary col-xs-12" id="get-checked-data">Get Checked Data</button> </div> <pre id="display-json"></pre> </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(); }); $('#get-checked-data').on('click', function(event) { event.preventDefault(); var checkedItems = {}, counter = 0; $("#check-list-box li.active").each(function(idx, li) { checkedItems[counter] = $(li).text(); counter++; }); $('#display-json').html(JSON.stringify(checkedItems, null, '\t')); }); });

Related: See More


Questions / Comments:

Hello. Thanks for the great Checked listbox. I am a bit of a noob to JQuery / JavaScript.

Does anybody have a snip of code to add a element via a script. I have already got a script to add a element but it does not have the theming and functionality like the other items

Thanks

Col

colinturner99 () - 1 week ago - Reply 0


Before saying anything, thanks for this cool bootstrap snippet. Really appreciated.

For anyone who wanted this checklist behave like radio list,

above all code define two variables var selItem, selChk; for eg.

And use below code inside widget click event

//Getting clicked list and check object

var temp = $widget;

var tempChk = $checkbox;

if (selItem === undefined || selChk === undefined) //First time usage goes here

{

selItem = temp;

selChk = tempChk;

$checkbox.prop('checked', !$checkbox.is(':checked'));

updateDisplay();

}

else {

//First removing element that is checked

$widget = selItem;

$checkbox = selChk;

$checkbox.prop('checked', !$checkbox.is(':checked'));

updateDisplay();

//Updating global variables

selItem = temp;

selChk = tempChk;

//Checking the element that user clicked

$widget = temp;

$checkbox = tempChk;

$checkbox.prop('checked', !$checkbox.is(':checked'));

updateDisplay();

}

Plus, in widget click event, there is a updateDisplay function but also same function used in checkbox change event which is triggered inside widget click event. That makes updatedisplay function to execute twice. Above example for radio list like behave changes this execution so that updateDisplay function only hits one time.

igzo () - 7 months ago - Reply 0


How to get the list of unchecked items?

atulmala () - 11 months ago - Reply 0


Modify:

$checkbox = $('<input type="checkbox" name="'+$widget.text()+'" class="hidden" />'),

Leeko88 (-1) - 10 months ago - Reply -1