JavaScript/jQuery CheckBox - Getting Started
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:
- $(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.3/css/dx.light.css">
- <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/24.2.3/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
:
- $(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.
- $(function() {
- $("#check-box").dxCheckBox({
- // ...
- onValueChanged: function(e) {
- if (e.value) {
- DevExpress.ui.notify("The CheckBox is checked", "success", 500);
- }
- }
- });
- });
If you have technical questions, please create a support ticket in the DevExpress Support Center.