Check Boxes and Radio Buttons

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.
Check Boxes
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):

It also create four buttons each of which invokes an appropriate function using the onClick event.
The following JavaScript defines the functions used by the onClick events:

The reverse() function cycles through the checkboxes setting the value of each checkbox to the opposite of its original value.
Radio Buttons
The following example shows how to find the value of radio buttons:

Question 0? Yes
No

Question 1? Yes
No

Question 2? Yes
No

Question 3? Yes
No

Question 4? Yes
No

Question 5? Yes
No

Question 6? Yes
No

Question 7? Yes
No

Question 8? Yes
No

Question 9? Yes
No

yes:
no:

Which looks like this:
Question 0? Yes No Question 1? Yes No Question 2? Yes No Question 3? Yes No Question 4? Yes No Question 5? Yes No Question 6? Yes No Question 7? Yes No Question 8? Yes No Question 9? Yes No
yes: no:
Multiple Choice Quiz
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: test = document.formName.radioGroupName[indexNumber].checked;
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:

Black = White	True or False ?
2 + 2 = 4	True or False ?
5 - 3 = 1	True or False ?
7 * 7 = 49	True or False ?
36 / 6 = 5	True or False ?
99 - 33 = 66	True or False ?
33 + 99 = 66	True or False ?
5 + 4 + 3 = 12	True or False ?
6 + 5 + 4 = 13	True or False ?
81 / 9 = 9	True or False ?

Correct:
Wrong:
Blank:

Which looks like this:
Black = White
True or False ?
2 + 2 = 4
True or False ?
5 - 3 = 1
True or False ?
7 * 7 = 49
True or False ?
36 / 6 = 5
True or False ?
99 - 33 = 66
True or False ?
33 + 99 = 66
True or False ?
5 + 4 + 3 = 12
True or False ?
6 + 5 + 4 = 13
True or False ?
81 / 9 = 9
True or False ?
Correct: Wrong: Blank:
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.: if (yesChoice == noChoice)
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: document.formName.radioName[indexNumber].checked = false;
does not work. The only way to unset a Radio Button is to reset the form: document.formName.reset();
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.