Angular API

ejCheckBox

8 Mar 201813 minutes to read

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.

Syntax

<ej-checkbox></ej-checkbox>

Example

<ej-checkbox id="checkBox"></ej-checkbox>

Requires

module:jQuery
module:ej.core.js
module:ej.checkbox.js

Members

checked `boolean | string[]`

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.

Default Value

false

Example

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

checkState `enum`

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

Name	Type	Default	Description
Uncheck	string	uncheck	Enum for Uncheck state checkbox
Check	string	check	Enum for Check state checkbox
Indeterminate	string	indeterminate	Enum for Indeterminate state checkbox

Default Value

null

Example

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

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

cssClass `string`

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

Default Value

””

Example

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

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

enabled `boolean`

Specifies the checkbox control state.

Default Value

true

Example

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

enablePersistence `boolean`

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.

Default Value

false

Example

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

enableRTL `boolean`

Specify the Right to Left direction to Checkbox

Default Value

false

Example

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

enableTriState `boolean`

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

Default Value

false

Example

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

htmlAttributes `object`

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

Default Value

{}

Example

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

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

id `string`

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

Default Value

null

Example

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

idPrefix `string`

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

Default Value

“ej”

Example

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

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

name `string`

Specifies the name attribute of the CheckBox.

Default Value

null

Example

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

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

showRoundedCorner `boolean`

Displays rounded corner borders to CheckBox

Default Value

false

Example

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

size `enum`

Specifies the size of the CheckBox.See below to know available CheckboxSize</a>

Name	Description
Medium	Displays the CheckBox in medium size
Small	Displays the CheckBox in small size

Default Value

“small”

Example

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

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

text `string`

Specifies the text content to be displayed for CheckBox.

Default Value

””

Example

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

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

validationMessage `object`

Set the jQuery validation error message in CheckBox.

NOTE

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

Default Value

null

Example

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

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

validationRules `object`

Set the jQuery validation rules in CheckBox.

NOTE

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

Default Value

null

Example

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

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

value `string`

Specifies the value attribute of the CheckBox.

Default Value

null

Example

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

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

Methods

destroy()

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

Example

<ej-checkbox id="checkBox"></ej-checkbox>
<label for="checkBox">Experienced</label>

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

disable()

Disable the CheckBox to prevent all user interactions.

Example

<ej-checkbox id="checkBox"></ej-checkbox>
<label for="checkBox">Experienced</label>

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

enable()

To enable the CheckBox

Example

<ej-checkbox id="checkBox"></ej-checkbox>
<label for="checkBox">Experienced</label>

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

isChecked()

To Check the status of CheckBox

####Returns

boolean

Example

<ej-checkbox id="checkBox"></ej-checkbox>
<label for="checkBox">Experienced</label>

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

Events

beforeChange

Fires before the CheckBox is going to changed its state successfully

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the CheckBox model
type	string	returns the name of the event
event	object	returns the event model values
isChecked	boolean	returns the status whether the element is checked or not.

Example

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

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

ejchange

Fires when the CheckBox state is changed successfully

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the CheckBox model
type	string	returns the name of the event
event	object	returns the event arguments
isChecked	boolean	returns the status whether the element is checked or not.
checkState	string	returns the state of the checkbox

Example

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

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

create

Fires when the CheckBox state is created successfully

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the CheckBox model
type	string	returns the name of the event

Example

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

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

destroy

Fires when the CheckBox state is destroyed successfully

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the CheckBox model
type	string	returns the name of the event

Example

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

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