Click here to Skip to main content
11,923,046 members (60,775 online)
Click here to Skip to main content
Add your own
alternative version


8 bookmarked

Checkbox List With Filtering jQuery Widget

, 18 Sep 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
A checkbox list jQuery UI widget with real time filtering functionality explained


We used checkbox-list controls back at the good old days for desktop applications. This is a lightweight implementation of checkbox list control as a jQuery UI widget.


First of all, we need to populate the listbox with data. I used a hard-coded JSON data model. Each item has a text property and a value property.

var dataModel = [
      {text: 'checkbox-1 caption', value:'1'}

And selection data returned within the same data model.

Using the Code

checkList widget can be applied easily with a div element. 

<div id='myCheckList'></div> 
      listItems: dataModel,
      onChange: selChange

We can set the listbox items on creation by passing the listItems parameter or after widget created set data model manually by calling setData method. Also as you see, we have an onChange event. Event is fired whenever any item's check state is changed. In the demo application, I used this event to display the selected elements.

We can simply get the selected elements by calling getSelection method. This returns the same data model we use to set the listbox items.

function selChange(){ 
      var selection = $('#myCheckList').checkList('getSelection'); 


Filtering capability is implemented without any Ajax calls. It's simple, we check every listitem in the listbox if it contains the filter string. Then we show the matched items and hide the unmatched ones. While showing and hiding listbox items, we can apply some jQuery effects. The default effect is defined as blink in the options.

Have fun.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Evren Yortuçboylu
Software Developer (Senior)
Turkey Turkey
No Biography provided

You may also be interested in...

Comments and Discussions

QuestionScroll bar not working Pin
Member 115110629-Mar-15 11:34
memberMember 115110629-Mar-15 11:34 
SuggestionKeyup and Down feature for highlighting checkboxes Pin
Ajmal Salim7-Oct-14 19:44
memberAjmal Salim7-Oct-14 19:44 
QuestionDeselect All not working Pin
Abhinav Bishnoi4-Aug-14 21:14
memberAbhinav Bishnoi4-Aug-14 21:14 
QuestionHow to convert ASP's checkboxlist in this? Pin
Member 1061999923-Feb-14 23:49
memberMember 1061999923-Feb-14 23:49 
QuestionHow can I make its use as multiple columns? Pin
Member 1061999923-Feb-14 20:58
memberMember 1061999923-Feb-14 20:58 
GeneralHow to add items from web service mathod in jquery var items=[ ] Pin
Member 1058395412-Feb-14 1:55
memberMember 1058395412-Feb-14 1:55 
BugBug on chrome Pin
reminus1-May-13 2:28
memberreminus1-May-13 2:28 
QuestionselChange event fires for each item in the list Pin
dunwan17-Oct-12 8:18
memberdunwan17-Oct-12 8:18 
AnswerRe: selChange event fires for each item in the list Pin
holmm12-Nov-12 2:01
memberholmm12-Nov-12 2:01 
AnswerRe: selChange event fires for each item in the list Pin
SXP22-Nov-12 22:12
memberSXP22-Nov-12 22:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.151125.3 | Last Updated 18 Sep 2012
Article Copyright 2012 by Evren Yortuçboylu
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid