# CheckedListBox

The [Wisej.Web.CheckedListBox](https://docs.wisej.com/api/namespaces/wisej.web/checkedlistbox) is based upon the [Wisej.Web.ListBox](https://docs.wisej.com/api/namespaces/wisej.web/listbox) control but includes a checkbox on the left side of each list item.

{% hint style="info" %}
For a full list of properties, methods and events see the [API documentation](https://docs.wisej.com/api/wisej.web/lists-and-grids/checkedlistbox).
{% endhint %}

## Features

### Checkbox

Each item within the CheckedListBox control has a checkbox on the left side of it.

<div align="left"><img src="https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-153bc9ce4d7d8c449781beb12d04393ad7676079%2FCheckedListBox.png?alt=media" alt=""></div>

{% hint style="info" %}
Similar to DisplayMember, ValueMember, etc. The CheckedListBox control contains a property, **CheckStateMember**, that defines the property of the data source or list that sets the check state for each item.
{% endhint %}

The **CheckOnClick** property of the CheckedListBox control can also be set to accept check state changes on a list item.

## How To

### Apply Checkboxes

Adding Checkboxes to the CheckedListBox control is easy. See the following code snippet:

{% tabs %}
{% tab title="C#" %}

```csharp
private void Page1_Load(object sender, EventArgs e)
{
			var myGroceries = new List<dynamic>() {
				new { name = "Eggs", price = 1.00, purchased = true },
				new { name = "Apples", price = 0.50, purchased = false },
				new { name = "Milk", price = 2.00, purchased = true },
				new { name = "Juice", price = 3.00, purchased = false }
			};

			this.checkedListBox1.DataSource = myGroceries;
			this.checkedListBox1.DisplayMember = "name";
			this.checkedListBox1.CheckStateMember = "purchased";
}
```

{% endtab %}

{% tab title="VB.NET" %}

```visual-basic
Private Sub Page1_Load(ByVal sender As Object, ByVal e As EventArgs)
        Dim myGroceries = New List(Of Object)() From {
            New With {
            .name = "Eggs",
            .price = 1.0,
            .purchased = True
        },
        New With {
            .name = "Apples",
            .price = 0.5,
            .purchased = False
        },
        New With {
            .name = "Milk",
            .price = 2.0,
            .purchased = True
        },
        New With {
            .name = "Juice",
            .price = 3.0,
            .purchased = False
        }
    }
    Me.checkedListBox1.DataSource = myGroceries
    Me.checkedListBox1.DisplayMember = "name";
    Me.checkedListBox1.CheckStateMember = "purchased";
    End Sub
```

{% endtab %}
{% endtabs %}

The above code snippet results in:

<div align="left"><img src="https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-289d1da511b173b371309d001fb24f18da470c8e%2FCheckedListBoxCheckStateMember.png?alt=media" alt=""></div>

## Advanced

### JavaScript Widget

| Item                       | Description                                                                                                                                                                     |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Class name                 | wisej.web.CheckedListBox for the CheckedListBox. wisej.web.listbox.ListItem for each list box item.                                                                             |
| Theme appearance           | "list", "listitem" for the items in the list box. See [Themes](https://docs.wisej.com/theme-builder/theme-elements/elements).                                                   |
| ListBox child components   | "scrollbar-x" is the horizontal scrollbar and "scrollbar-y" is the vertical scrollbar. See [JavaScript](https://docs.wisej.com/docs/concepts/javascript-object-model).          |
| List Item child components | "checkbox" is the checkbox shown in each list item. "icon" is the icon shown in each list item. [See JavaScript](https://docs.wisej.com/docs/concepts/javascript-object-model). |
| ToolContainer state        | "listbox", see [Embedded Tools](https://docs.wisej.com/docs/controls/general/embedded-tools).                                                                                   |
| Source code                | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js)                                                             |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wisej.com/docs/controls/lists/listbox/checkedlistbox.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.