Easy jQuery & jQuery UI Checklist Widget - CheckList

CheckList is a simple, lightweight jQuery plugin which helps you create a dynamic, filterable, responsive checklist using jQuery UI.

How to use it:

1. Make sure to load jQuery library and jQuery UI before you load the jQuery CheckList plugin.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>

2. Load the jQuery CheckList plugin's JavaScript and CSS in the webpage.

<link rel="stylesheet" href="checkList.css">
<script src="jquery.ui.checkList.js"></script>

3. Create a DIV container that will be populated with your custom checklist items after init.

<div id='myCheckList'></div>

4. Create another DIV container to place the selected checklist entries.

<div id='selectedItems'></div>

5. Prepare your data in the JavaScript.

var items = [
    {text: 'Onion', value: '1'},
    {text: 'Ketchup', value: '2'},
    {text: 'Mayonnaise', value: '3'},
    {text: 'Pickles', value: '4'},
    {text: 'Tomato', value: '5'},
    {text: 'Patatoes', value: '6'},
    {text: 'Sausage', value: '7'},
    {text: 'Lettuce', value: '8'},
    {text: 'Pepper', value: '9'}
];

6. Initialize the plugin and we're done.

$('#myCheckList').checkList({
  listItems: items
});

7. Default plugin options.

$('#myCheckList').checkList({

  // predefined data
  listItems : [],

  // select name
  name : '',

  // pre-selected items
  selectedItems: [],

  // filter effect
  effect: 'blink',

  // onChange callback
  onChange: {},
  objTable: '',
  icount: 0
  
});

8. Set/update the new data to the checklist.

var newItems = [
    ...
];

$('#myCheckList').checkList('setData', newData);

---

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