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
jQWidgets specializes in the development of platform independent and cross-browser compatible presentation layer components for building modern web-based applications for PC, Touch and Mobile. Our product provides developers with the essential set of User Interface widgets needed to streamline their development and reduce project costs.
Our goal is to help our customers deliver better web-based applications that can be accessed through any device and are pleasure to use.