Click here to Skip to main content
13,504,029 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


6 bookmarked
Posted 8 Jan 2012

ListBox with CheckBoxes

, 8 Jan 2012
Rate this:
Please Sign up or sign in to vote.
ListBox with CheckBoxes

The ListBox has the capability to show checkboxes for each item in a list. Each item can be checked and unchecked by clicking the checkbox or by using the ‘checkIndex’ and ‘uncheckIndex’ methods. Users are allowed to check any number of items, including none.

Follow these steps to create a listbox with the capability to display list items with checkboxes:

  1. Include the JavaScript files. The listbox is implemented in the jqxlistbox.js. You need to include the jqxbutton.js and jqxscrollbar.js plug-ins because the listbox uses the Scrollbar and Button plug-ins. The checkbox plug-in is implemented in the jqxcheckbox.js:
    <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
  2. Add the CSS stylesheet files. We will use the ‘summerListBox theme and the jqx.summer.css should be included, too.
    <link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="styles/jqx.summer.css" type="text/css" />
  3. Add a DIV element with id=’ListBox’ to the document’s body.
    <div id='ListBox'>
  4. Create the ListBox by using the jqxListBox constructor. In order to display a checkbox next to each list item, you need to set the ‘checkboxes’ property to true. The theme property is set to ‘summer’ so the listbox will also use the CSS classes from the jqx.summer.css.
    var source = [
        "Café Bombón",
        "Café au lait"
    // Create a ListBox.
    $("#ListBox").jqxListBox({ source: source, checkboxes: true, 
    		width: '200', height: '250px', theme: 'summer'});

If you want to programmatically check or uncheck a list item, use the ‘checkIndex’ or ‘uncheckIndex’ functions.

The code below checks the first item:

$("#ListBox").jqxListBox('checkIndex', 0);

The code below unchecks the second item:

$("#ListBox").jqxListBox('uncheckIndex', 1);

listbox with checkboxes


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


About the Author

United States United States
This member doesn't quite have enough reputation to be able to display their biography and homepage.
Group type: Organisation

13 members

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.180417.1 | Last Updated 8 Jan 2012
Article Copyright 2012 by jqwidgets
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid