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

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

doesn't work on bootstrap3

this doesn't fckin work

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

perfect. thank you

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

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

how can i change the color?

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?

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.

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

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);
}
}

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

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

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

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

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.

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

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

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

Let me know if this works for you.

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.

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.

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

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

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();
});

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.

I'd like to know this too ..

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

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.

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!!!

that'd be awesome!

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.

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)?

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.

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

Nice job. Very nice work.