UI Widgets CheckBox

A check box widget.

Included in: dx.phonejs.js, dx.webappjs.js, dx.all.js

The main purpose of the dxCheckBox widget is to allow a user to check or uncheck an option, and perform a specified action when widget value changes.

You can create a widget using one of the following approaches.

  • jQuery
    Use the dxCheckBox jQuery plug-in.

    HTML
    <div id="checkBox"></div>
    JavaScript
    $("#checkBox").dxCheckBox({
        text: 'Option enabled',
        value: true
    });
  • Knockout
    Add a div element and apply the dxCheckBox binding to this element.

    HTML
    <div data-bind="dxCheckBox: {
        text: 'Option enabled',
        value: true
    }"></div>
  • Angular
    Add a div element and apply the dx-check-box directive to this element.

    HTML
    <div dx-check-box="{
        text: 'Option enabled',
        value: true
    }"></div>

Note that DevExtreme widgets require you to link the jQuery and Globalize libraries to your application. If you use the Knockout or Angular approach, the Knockout or Angular library is also required.

See Also

You can find detailed information on the principles of working with the widget in the dxCheckBox section of the Editor Widgets article.

View Demo

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div class="checkBox" dx-check-box="{ 
        text: 'Check me',
        bindingOptions: {
            value: 'checkBoxState'
        }
    }"></div>
    <div class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label">Value</div>
            <div class="dx-field-value" dx-select-box="{
                dataSource: availableStates,
                bindingOptions: {
                    value: 'selectedState'
                }
            }"></div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.checkBoxState = false;
    $scope.availableStates = ["true", "false", "undefined"];
    $scope.selectedState = "false";
    $scope.$watch("selectedState", function () {
        switch ($scope.selectedState) {
            case "true":
                $scope.checkBoxState = true;
                break;
            case "false":
                $scope.checkBoxState = false;
                break;
            default:
                $scope.checkBoxState = undefined;
                break;
        }
    });
    $scope.$watch("checkBoxState", function () {
        switch ($scope.checkBoxState) {
            case true:
                $scope.selectedState = "true";
                break;
            case false:
                $scope.selectedState = "false";
                break;
            default:
                $scope.selectedState = "undefined";
                break;
        }
    });
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body {
    text-align: center;
}
.checkBox {
    margin-top: 25px;
}
<div class="checkBox" data-bind="dxCheckBox: { 
    text: 'Check me',
    value: checkBoxState
}"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">Value</div>
        <div class="dx-field-value" data-bind="dxSelectBox: {
            dataSource: availableStates,
            value: selectedState
        }"></div>
    </div>
</div>
var myViewModel = {
    checkBoxState: ko.observable(false),
    availableStates: ["true", "false", "undefined"],
    selectedState: ko.observable("false")
};
myViewModel.selectedState.subscribe(function (newValue) {
    switch(newValue)
    {
        case "true":
            myViewModel.checkBoxState(true);
            break;
        case "false":
            myViewModel.checkBoxState(false);
            break;
        default:
            myViewModel.checkBoxState(undefined);
            break;
    }
});
myViewModel.checkBoxState.subscribe(function (newValue) {
    switch(newValue)
    {
        case true:
            myViewModel.selectedState("true");
            break;
        case false:
            myViewModel.selectedState("false");
            break;
        default:
            myViewModel.selectedState("undefined");
            break;
    }
});
ko.applyBindings(myViewModel);
body {
    text-align: center;
}
.checkBox {
    margin-top: 25px;
}
<div class="checkBox" id="myCheckBox"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">Value</div>
        <div class="dx-field-value" id="stateSelector"></div>
    </div>
</div>
$("#myCheckBox").dxCheckBox({
    text: "Check me",
    onValueChanged: function (e) {
        switch (e.value) {
            case true:
                $("#stateSelector").dxSelectBox("instance").option("value", "true")
                break;
            case false:
                $("#stateSelector").dxSelectBox("instance").option("value", "false")
                break;
            default:
                $("#stateSelector").dxSelectBox("instance").option("value", "undefined")
                break;
        }
    }
});
$("#stateSelector").dxSelectBox({
    dataSource: ["true", "false", "undefined"],
    value: "false",
    onValueChanged: function(e){
        switch (e.value) {
            case "true":
                $("#myCheckBox").dxCheckBox("instance").option("value", true)
                break;
            case "false":
                $("#myCheckBox").dxCheckBox("instance").option("value", false)
                break;
            default:
                $("#myCheckBox").dxCheckBox("instance").option("value", undefined)
                break;
        }
    }
});
body {
    text-align: center;
}
.checkBox {
    margin-top: 25px;
}

Configuration

An object defining configuration options for the dxCheckBox widget.

Methods

This section describes the members used to manipulate the widget.

Events

This section describes events exposed by this widget.