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>