ejRadioButton

8 Mar 201815 minutes to read

The RadioButton control allows you to choose an option to perform an action. This control allows you to select true/false.

Syntax

  • JAVASCRIPT
    • <input ej-radiobutton />

    Example

  • HTML
    • <input type="radio" id="radioButton" ej-radiobutton [checked]="true"/>
<label for="radioButton">Experienced</label>
<br/> <input type="radio" name="radioButton" id="radioButton1" ej-radiobutton/>
<label for="radioButton1"> Fresher </label>

    Requires

    • module:jQuery

    • module:ej.core.js

    • module:ej.radiobutton.js

    Members

    checked boolean

    Specifies the check attribute of the Radio Button.

    Default Value

    • false

    Example

  • HTML
    • <input type="radio" name="radioButton" id="radioButton" ej-radiobutton [checked]="true"/>
<label for="radioButton">Experienced</label>
<br/> <input type="radio" name="radioButton" id="radioButton1" ej-radiobutton [checked]="true"/>
<label for="radioButton1">Fresher </label>

    cssClass string

    Specify the CSS class to RadioButton to achieve custom theme.

    Default Value

    • ””

    Example

  • HTML
    • <input type="radio" name="radioButton" id="radioButton" ej-radiobutton [cssClass]="customCss"/>
<label for="radioButton">Experienced</label>
<br/> <input type="radio" name="radioButton" id="radioButton1" ej-radiobutton [cssClass]="customCss"/>
<label for="radioButton1">Fresher </label>
  • TS
    • export class AppComponent {
        customCss: string;
        constructor() {
            this.customCss = "gradient-lime";
         }
}

    enabled boolean

    Specifies the RadioButton control state.

    Default Value

    • true

    Example

  • HTML
    • <input type="radio" name="radioButton" id="radioButton" ej-radiobutton [enabled]=true""/>
<label for="radioButton">Experienced</label>
<br/> <input type="radio" name="radioButton" id="radioButton1" ej-radiobutton [enabled]="true"/>
<label for="radioButton1">Fresher </label>

    enablePersistence boolean

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

    Default Value

    • false

    Example

  • HTML
    • <input type="radio" name="radioButton" id="radioButton" ej-radiobutton [enablePersistence]="true"/>
<label for="radioButton">Experienced</label>
<br/> <input type="radio" name="radioButton" id="radioButton1" ej-radiobutton [enablePersistence]="true"/>
<label for="radioButton1">Fresher </label>

    enableRTL boolean

    Specify the Right to Left direction to RadioButton

    Default Value

    • false

    Example

  • HTML
    • <input type="radio" name="radioButton" id="radioButton" ej-radiobutton [enableRTL]="true"/>
<label for="radioButton">Experienced</label>
<br/> <input type="radio" name="radioButton" id="radioButton1" ej-radiobutton [enableRTL]="true"/>
<label for="radioButton1">Fresher </label>

    htmlAttributes object

    Specifies the HTML Attributes of the Checkbox

    Default Value

    • {}

    Example

  • HTML
    • <input type="radio" name="radioButton" id="radioButton" ej-radiobutton [htmlAttributes]="htmlAttributes"/>
<label for="radioButton">Experienced</label>
<br/> <input type="radio" name="radioButton" id="radioButton1" ej-radiobutton [htmlAttributes]="htmlAttributes"/>
<label for="radioButton1">Fresher </label>
  • TS
    • export class AppComponent {
        htmlAttributes: Object;
        constructor() {
            this.htmlAttributes= {disabled:"disabled"};
         }
}

    id string

    Specifies the id attribute for the Radio Button while initialization.

    Default Value

    • null

    Example

  • HTML
    • <input type="radio" name="radioButton" ej-radiobutton [id]="id"/>
<label for="radioButton">Experienced</label>
<br/> <input type="radio" name="radioButton" ej-radiobutton [id]="radioId"/>
<label for="radioButton1">Fresher </label>
  • TS
    • export class AppComponent {
        id: string;
        radioId: string;
        constructor() {
            this.id= "sync";
            this.radioId = "sync1";
         }
}

    idPrefix string

    Specify the idPrefix value to be added before the current id of the RadioButton.

    Default Value

    • “ej”

    Example

  • HTML
    • <input type="radio" name="radioButton" id="radioButton" ej-radiobutton [idPrefix]="idPrefix"/>
<label for="radioButton">Experienced</label>
<br/> <input type="radio" name="radioButton" id="radioButton1" ej-radiobutton [idPrefix]="idPrefix"/>
<label for="radioButton1">Fresher </label>
  • TS
    • export class AppComponent {
        radioId: string;
        constructor() {
            this.radioId = "ej";
         }
}

    name string

    Specifies the name attribute for the Radio Button while initialization.

    Default Value

    • Sets id as name if it is null

    size enum

    Specifies the size of the RadioButton.

    Name Description
    Small Shows small size radio button
    Medium Shows medium size radio button

    Default Value

    • “small”

    Example

  • HTML
    • <input type="radio" name="radioButton" id="radioButton" ej-radiobutton [size]="size"/>
<label for="radioButton">Experienced</label>
<br/> <input type="radio" name="radioButton" id="radioButton1" ej-radiobutton [size]="size"/>
<label for="radioButton1">Fresher </label>
  • TS
    • export class AppComponent {
        size: string;
        constructor() {
            this.size = "medium";
         }
}

    text string

    Specifies the text content for RadioButton.

    Default Value

    • ””

    validationMessage object

    Set the jQuery validation error message in radio button.

    Default Value

    • null

    Example

  • HTML
    • <input type="radio" name="radioButton" id="radioButton" ej-radiobutton [validationRules]="validationRules" [validationMessage]="validationMessage"/>
<label for="radioButton">Experienced</label>
<br/> <input type="radio" name="radioButton" id="radioButton1" ej-radiobutton/>
<label for="radioButton1">Fresher </label>
  • TS
    • export class AppComponent {
        validationRules: Object;
        validationMessage: Object;
        constructor() {
            this.validationRules = { required: true };
            this.validationMessage = { required:"Required Radio value" };
         }
}

    validationRules object

    Set the jQuery validation rules in radio button.

    Default Value

    • null

    Example

  • HTML
    • <input type="radio" name="radioButton" id="radioButton" ej-radiobutton [validationRules]="validationRules"/>
<label for="radioButton">Experienced</label>
<br/> <input type="radio" name="radioButton" id="radioButton1" ej-radiobutton/>
<label for="radioButton1">Fresher </label>
  • TS
    • export class AppComponent {
        validationRules: Object;
        constructor() {
            this.validationRules = { required: true };
         }
}

    value string

    Specifies the value attribute of the Radio Button.

    Default Value

    • null

    Example

  • HTML
    • <input type="radio" name="radioButton" id="radioButton" ej-radiobutton [value]="value"/>
<label for="radioButton">Experienced</label>
<br/> <input type="radio" name="radioButton" id="radioButton1" ej-radiobutton [value]="radioValue"/>
<label for="radioButton1">Fresher </label>
  • TS
    • export class AppComponent {
        value: string;
        radioValue: string;
        constructor() {
            this.value = "Experienced";
            this.radioValue= "Fresher";
         }
}

    Methods

    disable()

    To disable the RadioButton

    Example

  • HTML
    • <input type="radio" name="radioButton" id="radioButton" ej-radiobutton/>
<label for="radioButton">Experienced</label>
  • TS
    • // Create instance of RadioButton
var checkObj = $("#radioButton").data("ejRadioButton");
checkObj.disable();

    enable()

    To enable the RadioButton

    Example

  • HTML
    • <input type="radio" name="radioButton" id="radioButton" ej-radiobutton/>
<label for="radioButton">Experienced</label>
  • TS
    • // Create instance of RadioButton
var checkObj = $("#radioButton").data("ejRadioButton");
checkObj.enable();

    Events

    beforeChange

    Fires before the RadioButton is going to changed its state successfully

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the RadioButton model
    type string returns the name of the event
    isChecked boolean returns true if element is checked, otherwise returns false
    isInteraction boolean returns true if change event triggered by interaction, otherwise returns false

    Example

  • HTML
    • <input type="radio" name="radioButton" id="radioButton" ej-radiobutton (beforeChange)="onBeforeChange($event)"/>
<label for="radioButton">Experienced</label>
  • TS
    • export class AppComponent { 
        constructor(){
        }
        onBeforeChange(e: any){
           //Your code here
        }

 }

    ejchange

    Fires when the RadioButton state is changed successfully

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the RadioButton model
    type string returns the name of the event
    isChecked boolean returns true if element is checked, otherwise returns false
    isInteraction boolean returns true if change event triggered by interaction, otherwise returns false

    Example

  • HTML
    • <input type="radio" name="radioButton" id="radioButton" ej-radiobutton (ejchange)="onChange($event)"/>
<label for="radioButton">Experienced</label>
  • TS
    • export class AppComponent { 
        constructor(){
        }
        onChange(e: any){
           // Your code here
        }

 }

    create

    Fires when the RadioButton created successfully

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

    Example

  • HTML
    • <input type="radio" name="radioButton" id="radioButton" ej-radiobutton (create)="onCreate($event)"/>
<label for="radioButton">Experienced</label>
  • TS
    • export class AppComponent { 
        constructor(){
        }
        onCreate(e: any){
           // your code here
        }

 }

    destroy

    Fires when the RadioButton destroyed successfully

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

    Example

  • HTML
    • <input type="radio" name="radioButton" id="radioButton" ej-radiobutton (destroy)="onDestroy($event)"/>
<label for="radioButton">Experienced</label>
  • TS
    • export class AppComponent { 
        constructor(){
        }
        onDestroy(e: any){
           // your code here
        }

 }