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.
The
ChildNode.nextElementSibling read-only property returns the element
immediately following the specified one in its parent's children list, or
null if the specified element is the last one in the list.
HTML
<input type="checkbox" value="VOne"
checked="checked" id="r1" name="g" />
<label for="r1">
One</label>
<input type="checkbox" value="VTwo"
id="r2" name="g" />
<label for="r2">
Two</label>
<input type="button" value="Status"
onclick="MyFunction()" />
Javascript
function
MyFunction() {
var chk = document.getElementsByName("g");
for (var i = 0; i <
chk.length; i++) {
if (chk[i].checked == true) {
var str = "";
str += "Checkbox at
index " + i + " is checked!" + "\n";
str += "Value of
Selected Checkbox: " + chk[i].value + "\n";
str += "Text of
Selected Checkbox:" + chk[i].nextElementSibling.innerHTML + "\n";
alert(str);
}
}
}
Getting Text from nextSibling
var element2 = chk[i].nextSibling;
while
(element2.nodeType != 1)
{
element2
= element2.nextSibling;
alert(element2.innerHTML);
}
|
defaultChecked
|
Boolean
property that reflects the value of the CHECKED attribute.
HTML
<input
type="checkbox" value="One" checked="checked"
id="r1" name="g" />
<label for="r1">
One</label>
<input type="checkbox"
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");
}
}
//Using
For Loop:
function
MyFunction() {
var chk = document.getElementsByName("g");
for (var i = 0; i < chk.length; i++) {
if
(chk[i].defaultChecked == true) {
alert("Checkbox at index " + i
+ " is Default checked!");
alert("Its Value is: "
+chk[i].value);
alert("Its Text: "+chk[i].nextElementSibling.innerHTML);
}
}
}
|
value
|
A
read/write string that specifies the value of the radio button (the value
attribute).
HTML
<input
type="checkbox" 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.
|
||
No comments:
Post a Comment