The ListBox
has the capability to show checkbox
es 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 checkbox
es:
- 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>
- Add the CSS stylesheet files. We will use the ‘
summer
’ ListBox
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" />
- Add a
DIV
element with id=’ListBox’
to the document’s body.
<div id='ListBox'>
</div>
- 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 = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Café Bombón",
"Café au lait"
];
$("#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);

CodeProject