ejmRadioButton

5 Jun 20239 minutes to read

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

Custom Design for HTML RadioButton control.

$(element).ejmRadioButton()

Example

HTML

<!-- Unobtrusive way of rendering -->
<input type="radio" id="radbtn" data-role="ejmradiobutton" />

HTML

<!-- Obtrusive way of rendering -->
<input type="radio" id="radbtn" />
<script>
$("#radbtn").ejmRadioButton();
</script>

Requires

• module:jQuery

• module:ej.core

• module:ej.unobtrusive

• module:ej.mobile.core

• module:ej.data

• module:ej.touch

Members

checked Boolean

Specifies whether to check the control.

Default Value:

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
<input type="radio" id="radbtn" data-role="ejmradiobutton" data-ej-checked=true />

HTML

<!-- Obtrusive way of rendering -->
<input type="radio" id="radbtn" />
<script>
$("#radbtn").ejmRadioButton({ checked: true });
</script>

cssClass String

Sets the root class for RadioButton 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.

Default Value:

• ””

Example

HTML

<!-- Unobtrusive way of rendering -->
<input type="radio" id="radbtn" data-role="ejmradiobutton" data-ej-cssclass="customclass" />

HTML

<!-- Obtrusive way of rendering -->
<input type="radio" id="radbtn" />
<script>
// To set cssClass API value
$("#radbtn").ejmRadioButton({ cssClass: "customclass" });
</script>

enabled Boolean

Specifies whether to enable or disable the control.

Default Value:

• true

Example

HTML

<!-- Unobtrusive way of rendering -->
<input type="radio" id="radbtn" data-role="ejmradiobutton" data-ej-enabled=false />

HTML

<!-- Obtrusive way of rendering -->
<input type="radio" id="radbtn" />
<script>
// To set enabled API value
$("#radbtn").ejmRadioButton({ enabled: false });
</script>

enablePersistence Boolean

Specifies to maintain the current model value to browser cookies for state maintenance. While refresh the page, the model value will get apply to the control from browser cookies.

Default Value:

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
<input type="radio" id="radbtn" data-role="ejmradiobutton" data-ej-enablepersistence=true />

HTML

<!-- Obtrusive way of rendering -->
<input type="radio" id="radbtn" />
<script>
$("#radbtn").ejmRadioButton({ enablePersistence: true });
</script>

enableRippleEffect Boolean

Specifies the ripple effect for the RadioButton control. By default in android mode its value is true and other rendermode we need to set as true.

Default Value:

• ej.isAndroid()?true:false

Example

HTML

<!-- Unobtrusive way of rendering -->
<input type="radio" id="radbtn" data-role="ejmradiobutton" data-ej-enablerippleeffect=true />

HTML

<!-- Obtrusive way of rendering -->
<input type="radio" id="radbtn" />
<script>
$("#radbtn").ejmRadioButton({ enableRippleEffect: true });
</script>

renderMode Enum

Specifies the rendering mode of the control. SeeRenderMode

Default Value:

• auto

Example

HTML

<!-- Unobtrusive way of rendering -->
<input type="radio" id="radbtn" data-role="ejmradiobutton" data-ej-rendermode="auto" />

HTML

<!-- Obtrusive way of rendering -->
<input type="radio" id="radbtn" />
<script>
// To set renderMode API value
$("#radbtn").ejmRadioButton({ renderMode: ej.mobile.RenderMode.Auto });
</script>

Methods

disable()

To disable the radiobutton.

Example

HTML

<input type="radio" id="radbtn" />
<script>
// get the radiobutton current state
$("#radbtn").ejmRadioButton();
$("#radbtn").ejmRadioButton("disable");
</script>

enable()

To enable the radiobutton.

Example

HTML

<input type="radio" id="radbtn" />
<script>
$("#radbtn").ejmRadioButton();
$("#radbtn").ejmRadioButton("enable");
</script>

isChecked()

To check whether the radio button is checked or not.

Example

HTML

<input type="radio" id="radbtn" />
<script>
// get the radiobutton current state
$("#radbtn").ejmRadioButton();
$("#radbtn").ejmRadioButton("isChecked");
</script>

Events

beforeChange

Event triggers before the RadioButton state is changed.

Name	Type	Description
argument	Object	Event parameters from RadioButton. Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. type string Returns the name of the event. model Object Returns the model value of the control. value string Returns the current element associated value. isChecked boolean Returns the status of the control. controlType string Returns the name of the controltype element Object Returns the current radiobutton element

Example

HTML

<!-- Unobtrusive way of rendering -->
<input type="radio" id="radbtn" data-role="ejmradiobutton" data-ej-beforechange="onBeforeChange" />
<script>
// before change event for radiobutton
function onBeforeChange(args) {
//handle the event            
}
</script>

HTML

<!-- Obtrusive way of rendering -->
<input type="radio" id="radbtn" data-role="ejmradiobutton" />
// before change event for radiobutton
<script>
$("#radbtn").ejmRadioButton({
beforeChange: function (args) {
//handle the event                
}
});
</script>

change

Event triggers when the RadioButton state is changed.

Name	Type	Description
argument	Object	Event parameters from RadioButton. Name Type Description cancel boolean returns true if the event should be cancelled; otherwise, false. type string returns the name of the event. model Object returns the model value of the control. value string returns the current element associated value. isChecked boolean returns the status of the control. controlType string returns the name of the controltype element Object return the current radiobutton element

Example

HTML

<!-- Unobtrusive way of rendering -->
<input type="radio" id="radbtn" data-role="ejmradiobutton" data-ej-change="onChange" />
<script>
// change event for radiobutton
function onChange(args) {
//handle the event
}
</script>

HTML

<!-- Obtrusive way of rendering -->
<input type="radio" id="radbtn" data-role="ejmradiobutton" />
// change event for radiobutton
<script>
$("#radbtn").ejmRadioButton({
change: function (args) {
//handle the event
}
});
</script>

touchEnd

Event triggers when touch end happens on the control.

Name	Type	Description
argument	Object	Event parameters from RadioButton. Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. type string Returns the name of the event. model Object Returns the model value of the control. value boolean Returns the current element associated value. isChecked boolean Returns the status of the control.

Example

HTML

<!-- Unobtrusive way of rendering -->
<input type="radio" id="radbtn" data-role="ejmradiobutton" data-ej-touchend="touchend" />
<script>
// touchEnd event for radiobutton
function touchend(args) {
//handle the event
}
</script>

HTML

<!-- Obtrusive way of rendering -->
<input type="radio" id="radbtn" data-role="ejmradiobutton" />
// touchEnd event for radiobutton
<script>
$("#radbtn").ejmRadioButton({
touchEnd: function (args) {
//handle the event
}
});
</script>

touchStart

Event triggers when touch start happens on the control.

Name	Type	Description
argument	Object	Event parameters from Radiobutton. Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. type string Returns the name of the event. model Object Returns the model value of the control. value string Returns the current element associated value. isChecked boolean Returns the status of the control. controlType string Returns the name of the controltype element Object Return the current radiobutton element

Example

HTML

<!-- Unobtrusive way of rendering -->
<input type="radio" id="radbtn" data-role="ejmradiobutton" data-ej-touchstart="touchstart" />
<script>
// touchStart event for radiobutton
function touchstart(args) {
//handle the event
}
</script>

HTML

<!-- Obtrusive way of rendering -->
<input type="radio" id="radbtn" data-role="ejmradiobutton" />
// touchStart event for radiobutton
<script>
$("#radbtn").ejmRadioButton({
touchStart: function (args) {
//handle the event
}
});
</script>