UI Widgets CheckBox

A check box widget.

Type: Object

The main purpose of the dxCheckBox widget is to allow a user to check or uncheck an option, and perform a specified action when the widget value changes. You can access the current check box state via the checked option. Declare an observable variable and pass it to the checked option to update the variable each time the check box state changes.

JavaScript
var checkBoxState = ko.observable(false);

To create the dxCheckBox widget, add a div element with dxCheckBox Knockout binding within the body of the required view.

HTML
<div data-bind="dxCheckBox: { checked: checkBoxState }"></div>

Refer to the Add a Widget documentation section to learn how to create widgets in detail.

Show Example:
jQuery
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">Check me</div>
        <div class="dx-field-value" data-bind="dxCheckBox: { checked: checkBoxState }"></div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">Value</div>
        <div class="dx-field-value" data-bind="text: checkBoxState"></div>
    </div>
</div>
checkBoxState = ko.observable(false);

Configuration

An object defining configuration options for the dxCheckBox widget.

Methods

This section describes methods that can be used to manipulate a widget.

Events

This section describes events fired by this component.