Javascript Tutorial





Español Français 中文 Deutsch Portuguese Japanese nederlands
   
 
Java-Script Tutorial
Introduction Introduction
Variables Variables
Operators Operators
Statements Statements
Loops Loops
Functions Functions
Objects Objects
Arrays Arrays
Cookies JS Cookies
Browser Objects Browser Objects
Form DOM Form DOM
Style Objects DOM Style Objects
Forums Ask Your Doubts
Scraps More about Javascript
Feedback Feedback
 




Radio Button Object


Tutorials Javascript

Topic

How to change Radio Button selection using javascript?
or
What are the events associated with Radiobutton?



Explanation
Basics of HTML form radiobutton

Radio Button Object :
        The following syntax will get the Radio Button object in javascript
Syntax: document.formname.radioname

Example Code:
<form name=testform>
<input name=rb1 value=test type=radio>
<input name=rb2 value=test2 type=radio>
</form>

<script language="javascript">
var rbobject= document.testform.rb1;
</script>

The object rbobject is an array of radio elements. To use the first radio button, we have to call rbobject[0], for second box it is rbobject[1] and so on. Here are the events, dom properties and method associated with Radio Button element.

Event Handlers: Associated with Form type Radio Button:
All the examples below use a javascript function output
<script language=javascript>
function output()
{
alert("testing RadioButton events");
}
</script>
Event Handler Description Example
onMouseOver This is invoked when a mouse is moved over the Radio Button <input type=radio onMouseOver="output()">
Result: CB1
onMouseDown This is invoked when a mouse is pressed down on the Radiobutton <input type=radio onMouseDown="output()">
Result: CB1
onMouseUp This is invoked when a mouse is pressed down on the radio and released <input type=radio onMouseUp="output()">
Result: CB1
onClick This is invoked when a mouse click is done on the radio <input type=radio onClick="output()">
Result: CB1
onBlur Executes some code when the Radio Button loses focus using tab <input type=radio onBlur="output()">
Result: CB1
onFocus Executes some code when the radio button gets the focus using tab <input type=radio onFocus="output()">
Result: CB1

DOM Properties:
The following are the list of DOM (Dynamic Object Model) properties that can be used to get and alter RadioButton properties in javascript.
The below examples are based on the form
<form name=testrb>
<input name=myrb1 type=radio value=xxx> Checking 1
<input name=myrb2 type=radio value=xxx> Checking 2
</form>

DOM Property Description Example
checked Used to check or select RadioButton selection To Check:
var ss = document.testb.myrb[0].checked;

To Select:
document.testb.myrb[1].checked = true;

This will select second element.
defaultChecked Used to check whether the Radio Button is checked by default To Get:
var ss = document.testb.myrb[0].defaultChecked;

form Used to get the parent node (form object) of this RadioButton To Get:
var ss = document.testb.myrb[0].form;

name Used to get Radio Button name To Get:
var ss = document.testb.myrb[0].name;

type Used to get form type To Get:
var ss = document.testb.myrb[0].type;

value Used to set or get RadioButton value To Get:
var ss = document.testb.myrb[0].value;

To Set::
document.testb.myrb[0].value = "testy";

DOM Methods:
The following are the list of DOM (Dynamic Object Model) methods that can be used to do dynamic changes like dynamic Radiobutton selection using javascript.
DOM Method Description Example
click() Used to dynamically make a Radio Button checked To Click:
document.testb.myrb.click();
blur() Used to dynamically make the Radio Button blur To Blur:
document.testb.myrb.blur();
focus() Used to dynamically get focus on the Radio Button To Focus:
document.testb.myrb.focus();

Example: Making Radiobutton Select on Mouse Over
<script language=javascript>
function rbevent()
{
var xx = document.xx.rbtest;
xx.checked = true;
}
function rbeventq()
{
var xx = document.xx.rbtest;
xx.checked = false;
}
</script>

<form name=xx>
<input type=radio name=rbtest onMouseOut="rbeventq()" onMouseOver="rbevent()"> Checking
</form>


Result:
Checking





A Note
Javascript (JS) is one of the most used languages in the world. Some times spelled as Java Script. Hope you enjoy this tutorial. Do send your feedback or suggestions on this javascript or java script tutorial. This is a copyright content.

Other Links

web hosting