Controlling Data Entry Using Form Fields
Creating 'Encoded' Name & Value Pairs
Passing data from one form to another
Addressing Form Field Validation with Regular Expressions and JavaScript 1.2
You are here: irt.org | Articles | JavaScript | Form | Check Boxes and Radio Buttons [ previous next ]
Published on: Sunday 6th July 1997 By: Martin Webb
This article describes how to automate Check Boxes, i.e. their production, interrogation, setting and clearing, and describes how to access the values of Radio Buttons.
A checkbox element has two values: CHECKED=TRUE or CHECKED=FALSE.
The following short script will create 10 like named checkboxes (i.e. box0 through to box9):
<FORM NAME="checkForm">
<SCRIPT LANGUAGE="JavaScript"><!--
for (var i=0;i<10;i++)
document.write(i + ': <INPUT TYPE="CHECKBOX" NAME="box' + i +'"> ');
//--></SCRIPT>
<P>
<INPUT TYPE="BUTTON" onClick="show()" VALUE="Show">
<INPUT TYPE="BUTTON" onClick="set()" VALUE="Set">
<INPUT TYPE="BUTTON" onClick="unset()" VALUE="Unset">
<INPUT TYPE="BUTTON" onClick="reverse()" VALUE="Reverse">
</FORM>It also create four buttons each of which invokes an appropriate function using the onClick event.
Which looks like:
The following JavaScript defines the functions used by the onClick events:
<SCRIPT LANGUAGE="JavaScript"><!--
function show() {
for (var i=0;i<10;i++) {
alert(eval("document.checkForm.box" + i + ".checked"));
}
}The show() function cycles through the checkboxes and uses the alert() method to display the value of each checkbox.
function set() {
for (var i=0;i<10;i++) {
var object = eval("document.checkForm.box" + i);
object.checked = true;
}
}The set() function cycles through the checkboxes setting the value of each checkbox to checked.
function unset() {
for (var i=0;i<10;i++) {
var object = eval("document.checkForm.box" + i);
object.checked = false;
}
}The unset() function cycles through the checkboxes setting the value of each checkbox to unchecked.
function reverse() {
for (var i=0;i<10;i++) {
var object = eval("document.checkForm.box" + i);
object.checked = !object.checked;
}
}
//--></SCRIPT>The reverse() function cycles through the checkboxes setting the value of each checkbox to the opposite of its original value.
The following example shows how to find the value of radio buttons:
<FORM NAME="radioForm">
Question 0? Yes <INPUT TYPE="RADIO" NAME="q0">
No <INPUT TYPE="RADIO" NAME="q0"><BR>
Question 1? Yes <INPUT TYPE="RADIO" NAME="q1">
No <INPUT TYPE="RADIO" NAME="q1"><BR>
Question 2? Yes <INPUT TYPE="RADIO" NAME="q2">
No <INPUT TYPE="RADIO" NAME="q2"><BR>
Question 3? Yes <INPUT TYPE="RADIO" NAME="q3">
No <INPUT TYPE="RADIO" NAME="q3"><BR>
Question 4? Yes <INPUT TYPE="RADIO" NAME="q4">
No <INPUT TYPE="RADIO" NAME="q4"><BR>
Question 5? Yes <INPUT TYPE="RADIO" NAME="q5">
No <INPUT TYPE="RADIO" NAME="q5"><BR>
Question 6? Yes <INPUT TYPE="RADIO" NAME="q6">
No <INPUT TYPE="RADIO" NAME="q6"><BR>
Question 7? Yes <INPUT TYPE="RADIO" NAME="q7">
No <INPUT TYPE="RADIO" NAME="q7"><BR>
Question 8? Yes <INPUT TYPE="RADIO" NAME="q8">
No <INPUT TYPE="RADIO" NAME="q8"><BR>
Question 9? Yes <INPUT TYPE="RADIO" NAME="q9">
No <INPUT TYPE="RADIO" NAME="q9"><BR>
<P>
<INPUT TYPE="BUTTON" onClick="showAnswers()" VALUE="Check Answers">
yes: <INPUT TYPE="TEXTBOX" NAME="yes" VALUE="" SIZE="3">
no: <INPUT TYPE="TEXTBOX" NAME="no" VALUE="" SIZE="3">
</FORM>
<SCRIPT LANGUAGE="JavaScript"><!--
function showAnswers() {
var yes = 0;
var no = 0;
for (var i=0;i<10;i++) {
if (eval("document.radioForm.q" + i + "[0].checked") == true)
yes++;
if (eval("document.radioForm.q" + i + "[1].checked") == true)
no++;
}
document.radioForm.yes.value = yes;
document.radioForm.no.value = no;
}
//--></SCRIPT>Which looks like this:
Radio Buttons are supposed to work in groups, very much like the old push buttons on transistor radios, where if you pressed a button for one radio station, the original pressed in button popped out. The idea being, there would always only be one button pushed in at any one time.
The way they are grouped together in JavaScript is by identically naming them. Therefore in the above JavaScript code, question 0 has two buttons both named q0. Liked named Radio Buttons are then grouped together in an array of elements.
To determine whether a particular button is pressed the syntax required is:
Where radioGroupName is the name used by the group of associated Radio Buttons, and indexNumber, is the array index, i.e. the position within the array.
The value returned to text is true, if the Radio Button is checked, and false if not.
The previous example, checks the values of the each of the 10 groups of Radio Buttons, and then displays the result in the text boxes. It doesn't actually make use of the Radio Buttons value field.
In the following example a simple check is made, comparing the answer chosen against the value of the Radio Button:
<FORM NAME="quizForm">
<TABLE>
<TR><TD>Black = White</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q0" VALUE="false">
or False <INPUT TYPE="RADIO" NAME="q0" VALUE="true"> ?</TD></TR>
<TR><TD>2 + 2 = 4</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q1" VALUE="true">
or False <INPUT TYPE="RADIO" NAME="q1" VALUE="false"> ?</TD></TR>
<TR><TD>5 - 3 = 1</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q2" VALUE="false">
or False <INPUT TYPE="RADIO" NAME="q2" VALUE="true"> ?</TD></TR>
<TR><TD>7 * 7 = 49</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q3" VALUE="true">
or False <INPUT TYPE="RADIO" NAME="q3" VALUE="false"> ?</TD></TR>
<TR><TD>36 / 6 = 5</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q4" VALUE="false">
or False <INPUT TYPE="RADIO" NAME="q4" VALUE="true"> ?</TD></TR>
<TR><TD>99 - 33 = 66</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q5" VALUE="true">
or False <INPUT TYPE="RADIO" NAME="q5" VALUE="false"> ?</TD></TR>
<TR><TD>33 + 99 = 66</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q6" VALUE="false">
or False <INPUT TYPE="RADIO" NAME="q6" VALUE="true"> ?</TD></TR>
<TR><TD>5 + 4 + 3 = 12</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q7" VALUE="true">
or False <INPUT TYPE="RADIO" NAME="q7" VALUE="false"> ?</TD></TR>
<TR><TD>6 + 5 + 4 = 13</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q8" VALUE="false">
or False <INPUT TYPE="RADIO" NAME="q8" VALUE="true"> ?</TD></TR>
<TR><TD>81 / 9 = 9</TD>
<TD>True <INPUT TYPE="RADIO" NAME="q9" VALUE="true">
or False <INPUT TYPE="RADIO" NAME="q9" VALUE="false"> ?</TD></TR>
</TABLE>
<P>
<INPUT TYPE="BUTTON" onClick="validateAnswers()" VALUE="Check Answers">
Correct: <INPUT TYPE="TEXTBOX" NAME="correct" VALUE="" SIZE="3">
Wrong: <INPUT TYPE="TEXTBOX" NAME="wrong" VALUE="" SIZE="3">
Blank: <INPUT TYPE="TEXTBOX" NAME="blank" VALUE="" SIZE="3">
</FORM>
<SCRIPT LANGUAGE="JavaScript"><!--
function validateAnswers() {
var correct = 0;
var wrong = 0;
var blank = 0;
for (var i=0;i<10;i++) {
var yesChoice = eval("document.quizForm.q" + i + "[0].checked");
var noChoice = eval("document.quizForm.q" + i + "[1].checked");
var yesAnswer = eval("document.quizForm.q" + i + "[0].value");
var noAnswer = eval("document.quizForm.q" + i + "[1].value");
if (yesChoice == noChoice)
blank++; // can't both be checked, thus must be both unchecked
else {
if ((yesChoice.toString() == yesAnswer) &&
(noChoice.toString() == noAnswer))
correct++;
else
wrong++;
}
}
document.quizForm.correct.value = correct;
document.quizForm.wrong.value = wrong;
document.quizForm.blank.value = blank;
}
//--></SCRIPT>Which looks like this:
In this example each of the Radio Buttons has a value associated with it using VALUE, the correct answers have a value of true and the incorrect answers have a value of false.
Note, that these values are text string values, i.e. enclosed within quotes, they are not boolean values, i.e. proper true of false.
When the answers are evaluated, the value property is used to obtain the Radio Buttons value.
In this example, the initial state of the Radio Buttons is not set, i.e. neither of the buttons are checked. As its possible for them to remain unchecked, a simple test is performed to exclude them from the calculation, i.e.:
This checks that if both of the Radio Buttons within the group are of the same state, i.e. both checked or both unchecked, then ignore them. As its impossible for them both to be checked at any one time, then it is safe to make the assumption, that if this check is true then they are both unchecked.
If this test is untrue, i.e. one or the other of the Radio Buttons is checked, the value of the Radio Buttons are compared with the checked status.
Note, the checked statuses are first converted using the toString() method, this is because their original object type is boolean. Comparing a boolean with a text string will never return the expected answer.
Unlike Check Boxes, it isn't easy to unset a Radio Button once it has been set. Using:
does not work. The only way to unset a Radio Button is to reset the form:
Unfortunately this has the effect of resetting everything on the form.
One possible work around, is to remember the settings of the form, reset it using the reset() method, and then repair the damage - difficult, but not impossible.
Controlling Data Entry Using Form Fields
Creating 'Encoded' Name & Value Pairs
Passing data from one form to another
Addressing Form Field Validation with Regular Expressions and JavaScript 1.2