Input tags
with the type attribute checkbox can be grouped like radio buttons
so that several checkboxes have the same name.
However, any number of checkboxes
can be selected by the user. Working with checkboxes
in JavaScript is similar
to but not exactly the same as working with radio
buttons. Here is a short example
that demonstrates getting values from checkboxes and
radio buttons in the same
form:
MUSIC SURVEY
GETTING ALL
THE VALUES
A series of checkboxes with the same name are
reflected as an array of checkbox
objects. In this example each check box input tag is
named Music
but has a different value. Since there are identically
named input tags of the
same type, an array of checkbox objects named Music is
created.
When the button in this form is pressed, it passes a
reference to the form to
a function named, in this case, showBoxes(frm). The
function loops
through the checkbox array within the form. To access
the check box array from
the form reference it is only necessary to append the
name of the checkboxes
to the form reference:
frm.Music
For example to access the number of elements in the
array:
frm.Music.length
or if the variable i contains the index of one of the
elements,
here is how you would check to see if that element had
been checked:
if (frm.Music[i].checked)
or get that element's value:
frm.Music[i].value
Since many values may be checked, this example gathers
the values from each by appending each value
on to the end of a string. Since the string is
eventually displayed in an alert dialog each value is
separated by a "\n", or new line character.
In this case the string is named messagemessage = message + frm.Music[i].value
+ "\n"
Here is the complete page:
<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"
CellSpacing="0" CellPadding="6">
<TR>
<TD align="right">I
enjoy:</TD>
<TD><INPUT
TYPE="Checkbox" NAME="Music" VALUE="Classical"
onClick="" CHECKED>Classical</TD>
<TD><INPUT
TYPE="Checkbox" NAME="Music" VALUE="Chamber"
onClick="">Chamber</TD>
<TD><INPUT
TYPE="Checkbox" NAME="Music" VALUE="Jazz"
onClick="" CHECKED>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" onClick=""
CHECKED>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>
