<HTML>
<HEAD>
<TITLE>JavaScript - Reading Checkboxes and Radio Buttons</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showBoxes(frm){
var message = "Your chose:\n\n"
//For each checkbox see if it has been checked, record the value.
for (i = 0; i < frm.Music.length; i++)
if (frm.Music[i].checked){
message = message + frm.Music[i].value + "\n"
}
//For each radio button if it is checked get the value and break.
for (var i = 0; i < frm.Performer.length; i++){
if (frm.Performer[i].checked){
message = message + "\n" + frm.Performer[i].value
break
}
}
alert(message)
}
//NOTE THE onClick="" empty event handlers in the checkbox and radio input fields below
//are there to fix a bug in Netscape 2.0X. Placing an onClick handler in imput fields fixes
//a bug where input objects inside tables are reflected more than once.
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff">
<FORM NAME="boxes">
<HR size=1 noshade>
<h2>Music Survey </h2>
<TABLE BORDER="1">
<TR>
<TD align="right">I enjoy:</TD>
<TD><INPUT TYPE="Checkbox" NAME="Music" VALUE="Classical" CHECKED onClick="">Classical</TD>
<TD><INPUT TYPE="Checkbox" NAME="Music" VALUE="Chamber" onClick="">Chamber</TD>
<TD><INPUT TYPE="Checkbox" NAME="Music" VALUE="Jazz" CHECKED onClick="">Jazz</TD>
<TD><INPUT TYPE="Checkbox" NAME="Music" VALUE="Rock" onClick="">Rock</TD>
<TD><INPUT TYPE="Checkbox" NAME="Music" VALUE="Punk" onClick="">Punk</TD>
</TR>
<TR>
<TD><div align="right">Favourite Performer:</div></TD>
<TD><INPUT TYPE="radio" NAME="Performer" VALUE="Aitken" onClick="">Aitken</TD>
<TD><INPUT TYPE="radio" NAME="Performer" VALUE="Coltrane" CHECKED onClick="">Coltrane</TD>
<TD><INPUT TYPE="radio" NAME="Performer" VALUE="Julliard" onClick="">Julliard</TD>
<TD><INPUT TYPE="radio" NAME="Performer" VALUE="Kronos" onClick="">Kronos</TD>
<TD><INPUT TYPE="radio" NAME="Performer" VALUE="Waits" onClick="">Waits</TD>
</TR>
</TABLE>
<P>
<INPUT TYPE="Button" VALUE="Tell Us What You Like!" onClick="showBoxes(this.form);">
</P>
</FORM>
</BODY>
</HTML>
