New to Kendo UI for jQuery? Download free 30-day trial

Getting Started with the CheckBox

This guide demonstrates how to get up and running with the Kendo UI for jQuery CheckBox.

After the completion of this guide, you will be able to achieve the following end result:

    <input id="checkbox" />

    <script>

      $("#checkbox").kendoCheckBox({ 
        label: "Checkbox",
        rounded:"large",
        size:"large",
        checked: true
      });
    </script>

1. Create an Empty input Element

First, create an <input/> element on the page that will serve as the initialization element of the CheckBox component.

<input id='checkbox'/>

2. Initialize the CheckBox

In this step, you will initialize the CheckBox from the <input> element. All settings of the CheckBox will be provided in the initialization script statement and you have to describe its layout and configuration in JavaScript.

<input id="checkbox"/>

<script>
    // Target the input element by using jQuery and then call the kendoCheckBox() method.
    $("#checkbox").kendoCheckBox();
</script>

3. Define the CheckBox Appearance

Once the basic initialization is completed, you can start adding additional configurations to the CheckBox. The component allows you to specify various styling options.

<input id="checkbox"/>

<script>

  // Target the input element by using jQuery and then call the kendoCheckBox() method.
  $("#checkbox").kendoCheckBox({
        size:"large",
        rounded:"large"
  });
</script>

4. Configure the CheckBox Label

The CheckBox allows you to configure the text of the label rendered next to the box through the label.

<input id="checkbox"/>

<script>

  // Target the input element by using jQuery and then call the kendoCheckBox() method.
  $("#checkbox").kendoCheckBox({
        label:"Checkbox"
        size:"large",
        rounded:"large"
  });
</script>

5. Define the Checked State

You can specify whether the CheckBox will be checked by default or not.

<input id="checkbox"/>

<script>

  // Target the input element by using jQuery and then call the kendoCheckBox() method.
  $("#checkbox").kendoCheckBox({
        label: "Checkbox"
        size: "large",
        rounded: "large"
        checked: true
  });
</script>

Next Steps

See Also

In this article