Click here to Skip to main content
Click here to Skip to main content

Tagged as

ListBox with CheckBoxes

, 8 Jan 2012
Rate this:
Please Sign up or sign in to vote.
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 … Continue reading →

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);

listbox with checkboxes

License

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

Share

About the Author

jqwidgets
jQWidgets
United States United States
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.
Group type: Organisation

13 members

Follow on   Twitter

Comments and Discussions

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