CheckBox

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

• Widget Basics - jQuery - information on working with widgets with jQuery approach
• Widget Basics - AngularJS - information on working with widgets with Angular approach
• Widget Basics - Knockout - information on working with widgets with Knockout approach

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

View Demo

See Also

• Handle Events - jQuery
• Handle Events - AngularJS
• Handle Events - Knockout