All docs
V21.1
24.2 (CTP)
The page you are viewing does not exist in version 24.2.
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

JavaScript/jQuery CheckBox - Overview

The CheckBox is a small box, which when selected by the end user, shows that a particular feature has been enabled or a specific property has been chosen.

View Demo

The following code adds the CheckBox to your page.

jQuery
HTML
JavaScript
<div id="checkBoxContainer"></div>
$(function() {
    $("#checkBoxContainer").dxCheckBox({
        text: "Check me",
        value: undefined
    });
});
Angular
HTML
TypeScript
<dx-check-box
    text="Check me"
    [(value)]="checkBoxValue">
</dx-check-box>
import { DxCheckBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    checkBoxValue: boolean;
}
@NgModule({
    imports: [
        // ...
        DxCheckBoxModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxCheckBox
        text="Check me"
        v-model:value="checkBoxValue"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxCheckBox from 'devextreme-vue/check-box';

export default {
    components: {
        DxCheckBox
    },
    data() {
        return {
            checkBoxValue: undefined
        };
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import CheckBox from 'devextreme-react/check-box';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            checkBoxValue: undefined
        };
        this.handleValueChange = this.handleValueChange.bind(this);
    }

    handleValueChange(e) {
        this.setState({
            checkBoxValue: e.value
        });
    }

    render() {
        return (
            <CheckBox
                text="Check me"
                value={this.state.checkBoxValue}
                onValueChanged={this.handleValueChange}
            />
        );
    }
}
export default App;

The CheckBox UI component can have the following states: checked (the value property is true), unchecked (value is false), undetermined (value is undefined).

See Also