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.

How to use it:

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.