ejRadioButton

11 Jul 201814 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

$(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>