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 ‘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" />

3. Add a DIV element with id=’ListBox’ to the document’s body.

   <div id='ListBox'>
   </div>

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 = [
       "Affogato",
       "Americano",
       "Bicerin",
       "Breve",
       "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);

CodeProject