HTML and CSS Reference
In-Depth Information
EXAMPLE
11.24
<html>
<head><title>Radio Buttons</title>
<script type="text/javascript">
1
function changeBg(f)
{
2
for (var i = 0; i < f.color.length;i++){
3
if(f.color[i].checked)
{
4
document.bgColor= f.color[i].value;
}
}
}
</script>
</head>
<body bgcolor="#CCFFFF">
<font face="arial"><b>
5
<form name="formradio">
Pick a background color:<p>
6
<input type=radio
name="color"
value="#0099CC" />dark cyan<br />
<input type=radio
name="color"
value="#339966" />teal<br />
<input type=radio
name="color"
value="#FF00FF" />magenta<br />
<input type=radio
name="color"
value="#FFFF66" />light yellow<br />
<input type=radio
name="color"
value="#FF9933" />light orange<br />
<p>
<input type=button
7
value="Click for Color" onClick="changeBg(this.form);" /
>
<input type=
"
reset
"
/>
</form>
</font>
</body>
</html>
EXPLANATION
1
A function called
changeBg()
is defined. It will take one parameter, a reference to the
form where the radio buttons are defined. The parameter
f
could also be written us-
ing the DOM hierarchy:
document.form[0]
or
document.formradio
(the form's name).
2
The
for
loop is entered. The variable,
i
, will be used to index through each of the
elements of the
radio
object. The name
color
is a reference to each object in the
forms
elements[]
array. The
length
property specifies how many radio buttons were
created in the form. When all of the buttons have been tested, the loop will exit.
