The CheckBox control allows you to check an option to perform an action. This control allows you to select true, false or an intermediate option. These CheckBoxes are supported with themes. The HTML CheckBox control is rendered as Essential JavaScript CheckBox control.

{% highlight html %}

{% endhighlight %}

{% highlight html %}

{% endhighlight %}

• module:jQuery

• module:ej.core.js

• module:ej.checkbox.js

{:#members:checked}

Specifies whether CheckBox has to be in checked or not. We can also specify array of string as value for this property. If any of the value in the specified array matches the value of the textbox, then it will be considered as checked. It will be useful in MVVM binding, specify array type to identify the values of the checked CheckBoxes.

• false

{% highlight html %}

<ej-checkbox id="checkBox" [checked]="true"> Experienced

{% endhighlight %}

{:#members:checkstate}

Specifies the State of CheckBox.See below to get available CheckState

• null

{% highlight html %}

<ej-checkbox id="checkBox" [enableTriState]="true" [checkState]="checkState"> Experienced

{% endhighlight %}

{% highlight ts %}

export class AppComponent { checkState: string; constructor() { this.checkState = "indeterminate"; } }

{% endhighlight %}

{:#members:cssclass}

Sets the root CSS class for CheckBox theme, which is used customize.

• ""

{% highlight html %}

<ej-checkbox id="checkBox" [cssClass]="customCss"> Experienced

{% endhighlight %}

{% highlight ts %}

export class AppComponent { customCss: string; constructor() { this.customCss = "gradient-lime"; } }

{% endhighlight %}

{:#members:enabled}

Specifies the checkbox control state.

• true

{% highlight html %}

<ej-checkbox id="checkBox" [enabled]="true"> Experienced

{% endhighlight %}

{:#members:enablepersistence}

Specifies the persist property for CheckBox while initialization. The persist API save current model value to browser cookies for state maintains. While refreshing the CheckBox control page the model value apply from browser cookies.

• false

{% highlight html %}

<ej-checkbox id="checkBox" [enablePersistence]="false"> Experienced

{% endhighlight %}

{:#members:enablertl}

Specify the Right to Left direction to Checkbox

• false

{% highlight html %}

<ej-checkbox id="checkBox" [enableRTL]="true"> Experienced

{% endhighlight %}

{:#members:enabletristate}

Specifies the enable or disable Tri-State for checkbox control.

• false

{% highlight html %}

<ej-checkbox id="checkBox" [enableTriState]="true"> Experienced

{% endhighlight %}

{:#members:htmlattributes}

It allows to define the characteristics of the CheckBox control. It will helps to extend the capability of an HTML element.

• {}

{% highlight html %}

<ej-checkbox id="checkBox" [htmlAttributes]="htmlAttributes"> Experienced

{% endhighlight %}

{% highlight ts %}

export class AppComponent { htmlAttributes: Object; constructor() { this.htmlAttributes = {required:"required"}; } }

{% endhighlight %}

{:#members:id}

Specified value to be added an id attribute of the CheckBox.

• null

{% highlight html %}

<ej-checkbox id="checkBox" [id]="sync"> Experienced

{% endhighlight %}

{:#members:idprefix}

Specify the prefix value of id to be added before the current id of the CheckBox.

• "ej"

{% highlight html %}

<ej-checkbox id="checkBox" [idPrefix]="idPrefix"> Experienced

{% endhighlight %}

{% highlight ts %}

export class AppComponent { idPrefix: string; constructor() { this.idPrefix = "ej"; } }

{% endhighlight %}

{:#members:name}

Specifies the name attribute of the CheckBox.

• null

{% highlight html %}

<ej-checkbox id="checkBox" [name]="name"> Experienced

{% endhighlight %}

{% highlight ts %}

export class AppComponent { name: string; constructor() { this.name = "sync"; } }

{% endhighlight %}

{:#members:showroundedcorner}

Displays rounded corner borders to CheckBox

• false

{% highlight html %}

<ej-checkbox id="checkBox" [showRoundedCorner]="true"> Experienced

{% endhighlight %}

{:#members:size}

Specifies the size of the CheckBox.See below to know available CheckboxSize

• "small"

{% highlight html %}

<ej-checkbox id="checkBox" [size]="size"> Experienced

{% endhighlight %}

{% highlight ts %}

export class AppComponent { size: any; constructor() { this.size = "medium"; } }

{% endhighlight %}

{:#members:text}

Specifies the text content to be displayed for CheckBox.

• ""

{% highlight html %}

<ej-checkbox id="checkBox" [text]="text"> Experienced

{% endhighlight %}

{% highlight ts %}

export class AppComponent { text: string; constructor() { this.text = "Hello World"; } }

{% endhighlight %}

{:#members:validationmessage}

Set the jQuery validation error message in CheckBox.

N> The property will work when the widget present inside the form. Additionally need to include jquery.validate.min.js plugin.

• null

{% highlight html %}

<ej-checkbox id="checkBox" [validationRules]="validationRules" [validationMessage]="validationMessage"> Experienced

{% endhighlight %}

{% highlight ts %}

export class AppComponent { validationRules: Object; validationMessage: Object; constructor() { this.validationRules = {required:true}; this.validationMessage = {required: "Required CheckBox value"}; } }

{% endhighlight %}

{:#members:validationrules}

Set the jQuery validation rules in CheckBox.

N> The property will work when the widget present inside the form. Additionally need to include jquery.validate.min.js plugin.

• null

{% highlight html %}

<ej-checkbox id="checkBox" [validationRules]="validationRules"> Experienced

{% endhighlight %}

{% highlight ts %}

export class AppComponent { validationRules: Object; constructor() { this.validationRules = {required:true}; } }

{% endhighlight %}

{:#members:value}

Specifies the value attribute of the CheckBox.

• null

{% highlight html %}

<ej-checkbox id="checkBox" [value]="value"> Experienced

{% endhighlight %}

{% highlight ts %}

export class AppComponent { value: string; constructor() { this.value = "Hello World"; } }

{% endhighlight %}

{:#methods:destroy}

Destroy the CheckBox widget all events bound using this._on will be unbind automatically and bring the control to pre-init state.

{% highlight html %}

Experienced

{% endhighlight %}

{% highlight ts %}

// Create CheckBox instance var checkBoxObj = $("#checkBox").data("ejCheckBox"); checkBoxObj.destroy();// Destroy the CheckBox control

{% endhighlight %}

{:#methods:disable}

Disable the CheckBox to prevent all user interactions.

{% highlight html %}

Experienced

{% endhighlight %}

{% highlight ts %}

// Create CheckBox instance var checkBoxObj = $("#checkBox").data("ejCheckBox"); checkBoxObj.disable();// disable the CheckBox control

{% endhighlight %}

{:#methods:enable}

To enable the CheckBox

{% highlight html %}

Experienced

{% endhighlight %}

{% highlight ts %}

// Create CheckBox instance var checkBoxObj = $("#checkBox").data("ejCheckBox"); checkBoxObj.enable();// enables the CheckBox control

{% endhighlight %}

{:#methods:ischecked}

To Check the status of CheckBox

####Returns

boolean

{% highlight html %}

Experienced

{% endhighlight %}

{% highlight ts %}

// Create CheckBox instance var checkBoxObj = $("#checkBox").data("ejCheckBox"); checkBoxObj.isChecked();// check the status of checkbox

{% endhighlight %}

{:#events:beforechange}

Fires before the CheckBox is going to changed its state successfully

{% highlight html %}

<ej-checkbox id="checkBox" (beforeChange)="onBeforeChange($event)"> Experienced

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor() { onBeforeChange(e: any){ // Your code here } } }

{% endhighlight %}

{:#events:ejchange}

Fires when the CheckBox state is changed successfully

{% highlight html %}

<ej-checkbox id="checkBox" (ejchange)="onChange($event)"> Experienced

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor() { onChange(e: any){ // Your code here } } }

{% endhighlight %}

{:#events:create}

Fires when the CheckBox state is created successfully

{% highlight html %}

<ej-checkbox id="checkBox" (create)="onCreate($event)"> Experienced

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor() { onCreate(e: any){ // Your code here } } }

{% endhighlight %}

{:#events:destroy}

Fires when the CheckBox state is destroyed successfully

{% highlight html %}

<ej-checkbox id="checkBox" (destroy)="onDestroy($event)"> Experienced

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor() { onDestroy(e: any){ // Your code here } } }

{% endhighlight %}