RadioStateChange event
Occurs when the state of a radio button has changed.
The current state of a radio button can be retrieved with the checked property.
The use of the RadioStateChange event is not recommended, use the onchange or onclick event instead.
For a cross-browser solution, the onclick event is a better choice, because the onchange event is fired only when the element loses the focus and the checked state has changed since the last time the element got the focus in Internet Explorer.
See the pages for the onchange and onclick events and the examples below for details.
How to register:
In HTML:
In JavaScript:object.addEventListener ("RadioStateChange", handler, useCapture);
This event cannot be registered in HTML.
In JavaScript:
The event object is accessible to all event handlers in all browsers.
The properties of the event object contain additional information about the current event.
To get further details about these properties and the possible event handler registration methods, please see the page for the event object.
| For a complete list of events, see the page for Events in JavaScript. |
Basic information:
| Bubbles | No |
| Cancelable | No |
| Event object | Event |
Actions that invoke the RadioStateChange event:
- Changing the state of the radio button by a mouse click.
- Changing the state of the radio button with an accesskey.
- Changing the state of the radio button with the SPACE key.
Actions that do not invoke the RadioStateChange event:
- Changing the value of the checked property from script.
Example HTML code 1:
This example illustrates the use of the RadioStateChange event.
|
|
||||
<head> <script type="text/javascript"> function Init () { var radio_female = document.getElementById ("radio_female"); var radio_male = document.getElementById ("radio_male"); if (radio_female.addEventListener) { radio_female.addEventListener ("RadioStateChange", OnRadioStateChange, false); radio_male.addEventListener ("RadioStateChange", OnRadioStateChange, false); } } function OnRadioStateChange (event) { var radio = event.target; if (radio.checked) { alert ("The " + radio.value + " radio is selected."); } else { alert ("The " + radio.value + " radio is unselected."); } } </script> </head> <body onload="Init ()"> Select your sex:<br /><br /> <input type="radio" name="sex" id="radio_female" value="female" /> <label for="radio_female">female</label> <br /> <input type="radio" name="sex" id="radio_male" value="male" /> <label for="radio_male">male</label> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Example HTML code 2:
A cross-browser solution for the previous example:
|
|
||||
<head> <script type="text/javascript"> function OnChangeRadio (radio) { alert ("The " + radio.value + " radio is selected."); } </script> </head> <body> Select your sex:<br /><br /> <input type="radio" name="sex" id="radio_female" value="female" onclick="OnChangeRadio (this)" /> <label for="radio_female">female</label> <br /> <input type="radio" name="sex" id="radio_male" value="male" onclick="OnChangeRadio (this)" /> <label for="radio_male">male</label> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Related pages:
User Contributed Comments