JavaScript/jQuery CheckBox - Getting Started
jQuery
Angular
Vue
React
This tutorial shows how to add the CheckBox to your application and configure its core features.
Each section in this tutorial describes a single configuration step. You can also find the full code in the GitHub repository.
Create a CheckBox
jQuery
Add DevExtreme to your jQuery application and use the following code to create a CheckBox component:
$(function() {
$("#check-box").dxCheckBox({ });
});
<html>
<head>
<!-- ... -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx.light.css">
<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/24.1.7/js/dx.all.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="check-box"></div>
</body>
</html>Angular
Add DevExtreme to your Angular application and use the following code to create a CheckBox component:
<dx-check-box></dx-check-box>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxCheckBoxModule } from 'devextreme-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxCheckBoxModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }Vue
Add DevExtreme to your Vue application and use the following code to create a CheckBox component:
<template>
<DxCheckBox />
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxCheckBox } from 'devextreme-vue/check-box';
export default {
components: {
DxCheckBox
}
}
</script>React
Add DevExtreme to your React application and use the following code to create a CheckBox component:
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { CheckBox } from 'devextreme-react/check-box';
function App() {
return (
<CheckBox />
);
}
export default App;Specify the Initial Value
The CheckBox can be in one of the following states depending on its value:
You can turn on the enableThreeStateBehavior option to allow users to cycle through all three states.
The following code specifies the initial value as null:
jQuery
$(function() {
$("#check-box").dxCheckBox({
value: null,
enableThreeStateBehavior: true
});
});Angular
<dx-check-box
[value]="null"
[enableThreeStateBehavior]="true"
>
</dx-check-box>Vue
<template>
<DxCheckBox
:value="null"
:enable-three-state-behavior="true"
/>
</template>
<script>
// ...
</script>React
// ...
function App() {
return (
<CheckBox
value={null}
enableThreeStateBehavior={true}
/>
);
}
export default App;Configure the CheckBox
To label the CheckBox and add a pop-up hint, specify the text and hint properties.
You can also use the iconSize property to specify a custom width and height for the CheckBox.
jQuery
$(function() {
$("#check-box").dxCheckBox({
// ...
text: 'Approve',
hint: 'Approve',
iconSize: 25
});
});Angular
<dx-check-box ...
text="Approve"
hint="Approve"
iconSize="25"
>
</dx-check-box>Vue
<template>
<DxCheckBox ...
text="Approve"
hint="Approve"
icon-size="25"
/>
</template>
<script>
// ...
</script>React
// ...
function App() {
return (
<CheckBox
text="Approve"
hint="Approve"
iconSize="25"
/>
);
}
export default App;Handle the Value Change
Implement the onValueChanged event handler to perform an action when users click the CheckBox.
The code below notifies a user every time the CheckBox is checked.
jQuery
$(function() {
$("#check-box").dxCheckBox({
// ...
onValueChanged: function(e) {
if (e.value) {
DevExpress.ui.notify("The CheckBox is checked", "success", 500);
}
}
});
});Angular
<dx-check-box ...
(onValueChanged)="onValueChanged($event)"
>
</dx-check-box>
import { Component } from '@angular/core';
import notify from 'devextreme/ui/notify';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
onValueChanged(e) {
if (e.value) {
notify("The CheckBox is checked", "success", 500);
}
}
}Vue
<template>
<DxCheckBox ...
@value-changed="onValueChanged"
/>
</template>
<script>
// ...
import notify from "devextreme/ui/notify";
export default {
// ...
methods: {
onValueChanged(e) {
if (e.value) {
notify("The CheckBox is checked", "success", 500);
}
}
}
}
</script>React
import React, { useCallback } from 'react';
import notify from 'devextreme/ui/notify';
// ...
function App() {
const onValueChanged = useCallback((e) => {
if (e.value) {
notify("The CheckBox is checked", "success", 500);
}
}, []);
return (
<CheckBox ...
onValueChanged={onValueChanged}
/>
);
}
export default App;