"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:

this is not working. custom checkboxes are not showing, default checkboxes are showing....?

khuramshahzad () - 6 months ago - Reply 0


there is no select all button how to implement in this.

Pankaj Kumar () - 2 years ago - Reply 0


doesn't work on bootstrap3

zyzz () - 3 years ago - Reply 0


this doesn't fckin work

programmer () - 3 years ago - Reply 0


I tried to disable the 'li' with disabled="disabled" but it doesn't work. How do I disable one of the element?

Stefano Magistri () - 3 years ago - Reply 0


perfect. thank you

Vishal Pandey () - 3 years ago - Reply 0


Any thoughts on how to create a "Select All" button using this?

Carl () - 4 years ago - Reply 0


Yes, a Select All / Select None would be a nice add to the functionality!

Yeap that's me () - 4 years ago - Reply 0


how can i change the color?

alessio () - 4 years ago - Reply 0


It works perfectly, nice work.
but imagine that i want to update data to the database, how could I do that? Should I use ajax?

Vítor Ferreira () - 4 years ago - Reply 0


In the second example, it shows you how to get which items are checked. As for storing it in a database it depends on how your database looks.

mouse0270 () - 4 years ago - Reply 0


I have a job with several tasks, and I just want to update the database, if that task is or is not done

Vítor Ferreira () - 4 years ago - Reply 0


Just use the first example and add checkboxes inside the list items. Under the .js //settings add a checkboxinput variable:

// Settings
var $widget = $(this),
$checkbox = $('<input type="checkbox" class="hidden"/>'),
$checkboxinput = $(this).children('input'),
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'
}
};

Then call the input variable telling it to check or uncheck the child checkbox whenever we add cosmetic changes.

// Update the button's color
if (isChecked) {
$widget.addClass(style + color + ' active');
$checkboxinput.prop('checked', true);
} else {
$widget.removeClass(style + color + ' active');
$checkboxinput.prop('checked', false);
}
}

Chris Cawley () - 4 years ago - Reply 0


how to checkbox chedked . dynamic call html loading.. or page loading ???

lalala () - 4 years ago - Reply 0


I'm trying to only allow one selection per group. Could you guide me with my problem? Thanks in advance!

Nick_ () - 4 years ago - Reply 0


Hi,

Really nice implementation. I am loading li dynamically by looping through JS array. The checked list group items show up. But the checked state doe not show on checked trigger state. Will this work by adding list items dynamically by JS code.

thanks

Waqas

Wacky () - 4 years ago - Reply 0


I'm not able to check the items..seems js doesn't work..any suggest? [bootstrap 3.3.1]

Roberto () - 4 years ago - Reply 0


First thank you for the sharing, it is really useful. I have a question why do you call updateDisplay twice in the following part? Triggering 'change' is calling updateDisplay() but after that it is calling again in 'on click'... Just wondering am I missing something?

$widget.on('click', function () {

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

$checkbox.triggerHandler('change');

updateDisplay();

});

$checkbox.on('change', function () {

updateDisplay();

});

P.S. the color part wasn't working on bootstrap 3.x as a solution I removed ' active' from the class add/remove comment. It is working but not sure it is the way it should be.

rkmorgan () - 4 years ago - Reply 0


Looks like bootstrap 3.2.0 doesn't work for this, at least for the different colors

Michael Whittenburg () - 5 years ago - Reply 0


I'm trying to do some like this example..
http://jsfiddle.net/ivawzh/...
But the checkboxes not working..

K a y () - 5 years ago - Reply 0


try this: http://jsfiddle.net/DcYhf/12/

Let me know if this works for you.

mouse0270 () - 5 years ago - Reply 0


It's working right now..
Thank you.

Also i'm using angularJs for this example, i load the checkboxes with a ng-repeat, when the load is complete the checkboxes not working.
I don't know if you have knowledge about angularJs.

K a y () - 5 years ago - Reply 0


I don't have knowledge in Angular yet but I would assume you are creating it dynamically? If so you need to modify the .js so you have a function that you call as instead of $(function () {})(); because that tells it will run the js code in the begining of the loading of the page. So you need to take that out and instead do something like function ActivateCheckList() { put all the code inside here }; and then in your html in your <script></script> you write ActivateCheckList(); after you are done dynamically creating the content.

FPJTB () - 5 years ago - Reply 0


How to modify this only able to select one like radio button?

Anony () - 5 years ago - Reply 0


Yes this is something we would like to be able to do as well

James () - 5 years ago - Reply 0


Tweak the event handler "click" to wipe out the status of any checked item. It creates a little recursion but is the fastest and easiest way to play ball.

// Event Handlers
$widget.on('click', function () {
// BEGIN INSERT
// Clear all other boxes
$('.list-group.checked-list-box .list-group-item').each(function () {
$(this).removeClass('list-group-item-primary active');
$(this).find('.state-icon').removeClass().addClass('state-icon glyphicon glyphicon-unchecked');
$(this).find('input').prop('checked', false);
});
// END INSERT

$checkbox.prop('checked', !$checkbox.is(':checked'));
$checkbox.triggerHandler('change');
updateDisplay();
});

exadig () - 4 years ago - Reply 0


I am really sorry for the delay in a response. I am usually pretty decent but I hate Disqus. As easy as it makes for for people to comment it doesn't seem to always inform me when someone leaves a comment. I very often try to open all of my snippets and check at least twice a week, but it is getting harder to do with each new snippet I add. I'll look into adding this feature though. It may take me about a week or so. Really busy.

mouse0270 () - 5 years ago - Reply 0


I'd like to know this too ..

Jones () - 5 years ago - Reply 0


can this be used in form? 这个能用于Form表单吗?
是不是修改这里就可以(modefy here)? $checkbox = $('<input type="checkbox" class="hidden"/>')
sorry for my English

jixzfw () - 5 years ago - Reply 0


I use this in a form, but I do something like this $('ul.checked-list-box li.active') this returns each list item that has been check. You can then specify what you would like to do with it in javascript as well... I can create a working example, if you give me 24 hours.

mouse0270 () - 5 years ago - Reply 0


Dear @mouse0270, thank you very much for your script, is pretty awesome!
But I have a little question for you, how I can to get a value instead of .text() attribute? I want to set a text and a value

1, Water
2, Tomato
3, Potato
4, Olives

And if i select Tomato and Olives, i want to get (2,4)

is possible to do this? Please help me, I'm not much experienced in jQuery. I need this values for sending via POST with PHP.

Thanks!!!

David () - 4 years ago - Reply 0


that'd be awesome!

jajafish () - 5 years ago - Reply 0


Updated the code: click on the button and it will build a json list of everything that is selected and show you the result below. Hope this helps.

mouse0270 () - 5 years ago - Reply 0


Thank you very much for the quick response!

For an edit form, how can I have the form load with the checkboxes initialized in a certain way (the way they were persisted to the database)?

jajafish () - 5 years ago - Reply 0


to have something checked by default all you have to add is //data-checked="true"// to the "li" element. If you take a look at the first example, it has an item checked by default.

mouse0270 () - 5 years ago - Reply 0


I am appending li dynamically, so will adding "data-checked=true" in the append() will work to show pre-checked list item.
I am using for loop to iterate a JSON array and make list items based on JSON data and append into UL. Rest of the code is same as yours?
But how do I set certain list items as checked? As my json data has property which indicate the state of list item (checked or un-checked)

thanks and this is great implementation.
cheers

Wacky () - 4 years ago - Reply 0


Nice job. Very nice work.

njenney () - 5 years ago - Reply 0