Dynamic Checklist Plugin With jQuery And Bootstrap

A small jQuery plugin that lets you generate a dynamic and fully controllable checklist to manage your tasks and schedules using Bootstrap's Glyphicons and list group component.

1. Insert the necessary jQuery library and Bootstrap framework into the html page.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

2. Prepare your data for the checklist.

var data = [
    {
      id:01,
      name:'jQueryScript',
      checked:true,
      selected:true
    },
    {
      id:02,
      name:'Net',
      checked:false,
      selected:true
    },
    {
      id:03,
      name:'jQuery',
      checked:true,
      selected:false
    }
    ...
  ]

3. Insert the Bootstrap Checklist's script into the page.

<script src="js/bootstrap-checklist.js"></script>

4. Generate the checklist in an empty html list you specify.

<ul id="myContainer"></ul>

$('#myContainer').checklist({
  data:data
});

5. Available configuration options.

$('#myContainer').checklist({
  // uses an external datasource instead
  url: null,
  
  // is multiple select
  multiselect:false,
  // determines whether or not relative Event onCheck will be triggerd
  silent:false,
  // sync check
  syncCheck:true,
  // shows checkboxes
  showCheckbox:true,
  // customize checkboxes
  settings:{
    color:'#FFFFFF',
    background_color:'#428BCA',
    on:'glyphicon glyphicon-check',
    off:'glyphicon glyphicon-unchecked'
  }
});

6. Callback functions.

$('#myContainer').checklist({
  onCheck: function(){},
  onUncheck: function(){},
  onSelect: function(){},
  onUnselect: function(){},
});

7. API methods.

var instance = $('#myContainer').checklist();
// checks a specific item
instance.setCheck(id,silent);
// unchecks a specific item
instance.setUncheck(id,silent);
// selects a specific item
instance.setSelect(id,silent);
// unselects a specific item
instance.setUnselect(id,silent);
// unselects all items
instance.unselectAll();
// uncheckes all items
instance.uncheckAll();
// gets checked data
instance.getCheckedData();

This awesome jQuery plugin is developed by leondryu. For more Advanced Usages, please check the demo page or visit the official website.