JavaScript/jQuery CheckBox - Getting Started
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
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
Add DevExtreme to your jQuery application and use the following code to create a CheckBox component:
index.js
index.html
- $(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.2.5/css/dx.light.css">
- <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/24.2.5/js/dx.all.js"></script>
- <script type="text/javascript" src="index.js"></script>
- </head>
- <body>
- <div id="check-box"></div>
- </body>
- </html>
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
:
index.js
- $(function() {
- $("#check-box").dxCheckBox({
- value: null,
- enableThreeStateBehavior: true
- });
- });
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.
index.js
- $(function() {
- $("#check-box").dxCheckBox({
- // ...
- onValueChanged: function(e) {
- if (e.value) {
- DevExpress.ui.notify("The CheckBox is checked", "success", 500);
- }
- }
- });
- });
Feedback