ejRadioButton

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

Syntax

  • javascript
  • $(element).ejRadioButton()

    Example

  • html
  • <input type="radio" id="radioButton"/>
    <label for="radioButton">Experienced</label>
    <br/> <input type="radio" name="radioButton" id="radioButton1"/>
    <label for="radioButton1"> Fresher </label>
    <script>
    $("#radioButton").ejRadioButton({checked:true});
    $("#radioButton1").ejRadioButton();
    </script>

    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"/>
    <label for="radioButton">Experienced</label>
    <br/> <input type="radio" name="radioButton" id="radioButton1"/>
    <label for="radioButton1">Fresher </label>
    <script>
    //To set check API value during initialization  
            $("#radioButton").ejRadioButton({ checked:  true });       
            $("#radioButton1").ejRadioButton({ checked:  true });
    </script>

    cssClass string

    Specify the CSS class to RadioButton to achieve custom theme.

    Default Value

    • ””

    Example

  • html
  • <input type="radio" name="radioButton" id="radioButton"/>
    <label for="radioButton">Experienced</label>
    <br/> <input type="radio" name="radioButton" id="radioButton1"/>
    <label for="radioButton1">Fresher </label>
    <script>
    // Set the root class for RadioButton control theme. This cssClass API helps to use custom skinning option for RadioButton control. By defining the root class using this API, we need to include this root class in CSS.                       
            $("#radioButton").ejRadioButton({cssClass: "gradient-lime"});
            $("#radioButton1").ejRadioButton({cssClass: "gradient-lime"});
    </script>

    enabled boolean

    Specifies the RadioButton control state.

    Default Value

    • true

    Example

  • html
  • <input type="radio" name="radioButton" id="radioButton"/>
    <label for="radioButton">Experienced</label>
    <br/> <input type="radio" name="radioButton" id="radioButton1"/>
    <label for="radioButton1">Fresher </label>
    <script>
    // Enable RadioButton on initialization. 
            //To set width API value 
             $("#radioButton").ejRadioButton ({ enabled: true });      
             $("#radioButton1").ejRadioButton ({ enabled: true });     
    </script>

    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"/>
    <label for="radioButton">Experienced</label>
    <br/> <input type="radio" name="radioButton" id="radioButton1"/>
    <label for="radioButton1">Fresher </label>
    <script>
    // To set enablePersistence API value 
    $("#radioButton").ejRadioButton({ enablePersistence: false });     
    $("#radioButton1").ejRadioButton({ enablePersistence: false });
    </script>

    enableRTL boolean

    Specify the Right to Left direction to RadioButton

    Default Value

    • false

    Example

  • html
  • <input type="radio" name="radioButton" id="radioButton"/>
    <label for="radioButton">Experienced</label>
    <br/> <input type="radio" name="radioButton" id="radioButton1"/>
    <label for="radioButton1">Fresher </label>
    <script>
    // Set the enableRTL during initialization.                     
            $("#radioButton").ejRadioButton({  enableRTL:true });      
            $("#radioButton1").ejRadioButton({  enableRTL:true });     
    </script>

    htmlAttributes object

    Specifies the HTML Attributes of the Checkbox

    Default Value

    • {}

    Example

  • html
  • <input type="radio" name="radioButton" id="radioButton"/>
    <label for="radioButton">Experienced</label>
    <br/> <input type="radio" name="radioButton" id="radioButton1"/>
    <label for="radioButton1">Fresher </label>
    <script>
    // Set the htmlAttributes during initialization.                        
            $("#radioButton").ejRadioButton({ htmlAttributes: {disabled:"disabled"} });        
    </script>

    id string

    Specifies the id attribute for the Radio Button while initialization.

    Default Value

    • null

    Example

  • html
  • <input type="radio" name="radioButton" id="radioButton"/>
    <label for="radioButton">Experienced</label>
    <br/> <input type="radio" name="radioButton" id="radioButton1"/>
    <label for="radioButton1">Fresher </label>
    <script>
    //To set id API value during initialization  
            $("#radioButton").ejRadioButton({  id: "sync" });
            $("#radioButton1").ejRadioButton({  id: "sync1" });
    </script>

    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"/>
    <label for="radioButton">Experienced</label>
    <br/> <input type="radio" name="radioButton" id="radioButton1"/>
    <label for="radioButton1">Fresher </label>
    <script>
    // To set  idPrefix  API value
    $("#radioButton").ejRadioButton ({  idPrefix : "ej" }); 
    $("#radioButton1").ejRadioButton ({  idPrefix : "ej" }); 
    </script>

    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"/>
    <label for="radioButton">Experienced</label>
    <br/> <input type="radio" name="radioButton" id="radioButton1"/>
    <label for="radioButton1">Fresher </label>
    <script>
    //To set size API value during initialization  
            $("#radioButton").ejRadioButton({  size: "medium"});       
            $("#radioButton1").ejRadioButton({  size: "medium"});
    </script>

    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"/>
    <label for="radioButton">Experienced</label>
    <br/> <input type="radio" name="radioButton" id="radioButton1"/>
    <label for="radioButton1">Fresher </label>
    <script>
    //To set validationMessage API during initialization  
    $("#radioButton").ejRadioButton ({   
      validationRules:{                     
              required:true
            },
      validationMessage: {
              required: "Required Radio value"
            }
    });
    $("#radioButton1").ejRadioButton ();
    </script>

    validationRules object

    Set the jQuery validation rules in radio button.

    Default Value

    • null

    Example

  • html
  • <input type="radio" name="radioButton" id="radioButton"/>
    <label for="radioButton">Experienced</label>
    <br/> <input type="radio" name="radioButton" id="radioButton1"/>
    <label for="radioButton1">Fresher </label>
    <script>
    //To set validationRules API during initialization  
    $("#radioButton").ejRadioButton ({   
      validationRules:{                     
              required:true
            }
    });
    $("#radioButton1").ejRadioButton ();
    </script>

    value string

    Specifies the value attribute of the Radio Button.

    Default Value

    • null

    Example

  • html
  • <input type="radio" name="radioButton" id="radioButton"/>
    <label for="radioButton">Experienced</label>
    <br/> <input type="radio" name="radioButton" id="radioButton1"/>
    <label for="radioButton1">Fresher </label>
    <script>
    //To set value API value during initialization  
            $("#radioButton").ejRadioButton({ value: "Experienced"});
            $("#radioButton1").ejRadioButton({ value: "Fresher"});
    </script>

    Methods

    disable()

    To disable the RadioButton

    Example

  • html
  • <input type="radio" name="radioButton" id="radioButton"/>
    <label for="radioButton">Experienced</label>           
    <script> 
    // Create RadioButton
    $("#radioButton").ejRadioButton();
    var checkObj = $("#radioButton").data("ejRadioButton");
    checkObj.disable();
    </script>
  • html
  • <input type="radio" name="radioButton" id="radioButton"/>
    <label for="radioButton">Experienced</label>
    <script> 
    // disable the RadioButton
    $("#radioButton").ejRadioButton();
    $("#radioButton").ejRadioButton("disable");        
    </script>

    enable()

    To enable the RadioButton

    Example

  • html
  • <input type="radio" name="radioButton" id="radioButton"/>
    <label for="radioButton">Experienced</label>
    <script> 
    // Create RadioButton
    $("#radioButton").ejRadioButton();
    var checkObj = $("#radioButton").data("ejRadioButton");
    checkObj.enable();
    </script>
  • html
  • <input type="radio" name="radioButton" id="radioButton"/>
    <label for="radioButton">Experienced</label>
    <script> 
    // enable the RadioButton
    $("#radioButton").ejRadioButton();
    $("#radioButton").ejRadioButton("enable"); 
    </script>

    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"/>
    <label for="radioButton">Experienced</label>   
    <script>
    //beforeChange event for RadioButton
    $("#radioButton").ejRadioButton({
      beforeChange:function (args){ }
    });  
    </script>

    change

    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"/>
    <label for="radioButton">Experienced</label>
    <script>
    //change event for RadioButton
    $("#radioButton").ejRadioButton({
      change: function (args){}
    }); 
    </script>

    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"/>
    <label for="radioButton">Experienced</label>
    <script>
    // //create event for RadioButton
    $("#radioButton").ejRadioButton({
      create:function(args){}
    }); 
    </script>

    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"/>
    <label for="radioButton">Experienced</label>
    <script>
    // //destroy event for RadioButton
    $("#radioButton").ejRadioButton({
      destroy:function(args){}
    }); 
    </script>