From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 5.7: Checkboxes and Radio Buttons

In older times, it was common for people who were illiterate to sign their name by using an X, which became known as making your mark. To allow people to make a selection from a list of options it was not uncommon to put their mark by their choice. It was only a matter of time when this was replaced with a box.

Where checkboxes started really taking off is when computers started being used as computers use binary and a checkbox is an easy way to indicate a binary decision. Forms designed to be processed by a computer started using checkboxes more often. Today they have largely become standardized with the only big area of contention being how to check a checkbox. Some people use X marks to indicate that a checkbox is checked. Others feel that a check mark (✓) should be used to indicate which is the selected items. Yet others feel that the box should be filled in. Unfortunately, this choice is left up to the browser developer, with the checkmark seeming to be the default. For those of you who want a bit more control, we will manually create a checkbox later.

To use a basic checkbox, we simply use the input tag with the type “checkbox”. In order for the checkbox to have text, you should follow the checkbox with a label. Checkboxes can initially be checked by using the “checked” attribute in the input tag. Here is an example:

Checking if a checkbox is checked is then simply the matter of getting the element (recall the getElementById method) and looking at the checked attribute of the element as seen here:

If you are doing server side work then you should be aware that only the checked checkboxes are sent to the server. The value sent is the value attribute in the checkbox, with the default value of “on” being used.

What do you do, however, if you don’t want to use the standard checkbox. While CSS does let you alter the ckeckbox to a limited degree, if you want a custom checkbox then you need to roll your own. This is very trivial code as you simply need an img element to hold one of the custom checkbox images then change that image when the image is clicked. In this example, we have a soundOn.png and a soundOff.png that we switch between. We also have a global variable named isSoundOn that holds a boolean indicating if the sound is on or off. Here is the code:

Radio buttons are a special case of checkboxes. They were named after older car radios where you had a series of buttons that you could quickly press to go to a preset radio station. Only one button could be selected at a time so when you clicked on a different button, the button that was down pops back out and the new button becomes the selected button. This is used in forms when you have to make a selection but can only select one item.

This leads to the obvious question, what if you want more than one set of radio buttons? How do you determine which group a radio button belongs to? This is where things get a tiny bit confusing. All radio buttons in a group share the same name but each radio button needs to have a unique value set for it. Likewise, if you are using ids, which you usually want to do if you want to manipulate things using JavaScript, then the ids of each radio button must be different. In other words, when working with radio buttons, even if they are only going to be used on the client, you need to use the name attribute. Here is an example:

You will notice that I did not bother to assign ids to the radio buttons. This is because there is a better method for finding out which radio button is selected and it just requires the name of the group of checkboxes. Under the document class is a method called querySelector which gives you the ability to get the first item that matches a query about the elements on the page. In this case we want the first input element with our group name that is also checked. The code for doing this is:

You will notice that we need to check to make sure that an option has actually been selected. If we had set one of the radio buttons to be a default value, by setting it to checked just like with checkboxes, then the check to make sure a choice was made would not be necessary since there would always be a selected item. It should also be pointed out that the value is a string so can be anything.

Because radio buttons tend to be in groups, it is always nice to take advantage of fieldsets to put the radio buttons in the appropriate groups. This is purely cosmetic. The group a radio button belongs in is determined by name, not where they are placed on the page, so it is possible to mix different groups in the same fieldset leading to confusion as is shown here:

The demo for this section is called CheckoxRaioDemo.html and is in the git repository.