Monday, December 23, 2013

Radio Button


Events
Events
Description
onBlur
Code is executed when the focus is removed from the radio button.

onClick
Code is executed when user clicks on the radio button.

onFocus
Code is executed when the focus is set on the radio button.






Properties
Properties
Description
form
References the form that contains the reset button.
accessKey
String value that sets/ returns the accessKey for the button.
name
Reflects the name of the text field (the name attribute).
id
Reflects the id of the text field (the id attribute).
checked
Boolean property that reflects the current state of the radio button, "true" if it's checked, and "false" if not.

HTML
<input type="radio" value="One" checked="checked" id="r1" name="g" />
    <label for="r1">
        One</label>
    <input type="radio" value="Two" id="r2" name="g" />
    <label for="r2">
        Two</label>

<input type="button" value="Status" onclick="MyFunction()" />

Javascript
function MyFunction() {
  var status = document.getElementById('r1').checked;
   if (status) {
    alert("r1 is checked");
   }
  else {
    alert("r2 is checked");
   }
}

defaultChecked
Boolean property that reflects the value of the CHECKED attribute.
HTML
<input type="radio" value="One" checked="checked" id="r1" name="g" />
    <label for="r1">
        One</label>
    <input type="radio" value="Two" id="r2" name="g" />
    <label for="r2">
        Two</label>

<input type="button" value="Status" onclick="MyFunction()" />

Javascript
function MyFunction() {
var status1 = document.getElementById('r1').defaultChecked;
            var status2 = document.getElementById('r2').defaultChecked;
            if (status1) {
                alert("r1 is checked by Default");
            }
            else if (status2) {
                alert("r2 is checked by Default");
            }
}

value
A read/write string that specifies the value of the radio button (the value attribute).
HTML
<input type="radio" value="One1" checked="checked" id="r1" name="g" />
    <label for="r1">
        One</label>  

<input type="button" value="Status" onclick="MyFunction()" />

Javascript
function MyFunction() {
  var value1 = document.getElementById('r1').value;
    alert(value1);   //returns:One1
}

type
A property available on all form elements, "type" returns the type of the calling form element, in this case, "radio".
disabled
Boolean value that sets/ returns whether the button is disabled.
tabindex
The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).
class
The class attribute specifies one or more classnames for an element.
style
The style attribute specifies an inline style for an element.
title
The title attribute specifies extra information about an element.
The information is most often shown as a tool tip text when the mouse moves over the element.

Methods
Methods
Description
blur()
Removes focus away from the radio button.

click()
Simulates a user clicking on the radio button.

focus()
Sets focus on the radio button.