Images Instead of Radio Buttons

Sometimes the radio button that browsers provide don't quite measure up to the design you want for your page.

To do something about that, use an image of a checked button and an image of an unchecked button instead of the browser's native form control.

Here is an illustration, a live example. Tap an unchecked button to see how it changes.

Fruit Grain Vegetables

You'll notice the above is similar to a browser's radio buttons, especially for the unchecked state. The checked state is darker within the circle than browsers generally have for their native controls. These also have a bit of a shadow at their lower‑right.

The thing is, you can provide any images you want to represent the checked and unchecked states of radio buttons — huge, tiny, bold, subdued — even animated if you are so inclined.

Overview

The regular radio button field code has a CSS style display:none so it won't display on the page. But it will submit with the form data, like radio buttons do.

An image is displayed instead of displaying the radio button field. The image either represents a checked radio button or an unchecked radio button.

When the image is tapped, this happens:

1. The image is changed from the checked version to the unchecked version, or vice versa.

2. The non-displayed radio button field that the image corresponds to is checked or unchecked according to the image — so when the form is submitted, it has the correct radio button information.

Switching the image and updating the radio button field's checked status is handled with JavaScript when a checked/unchecked image is tapped.

The Source Code

The source code is of the illustration displayed above.

There are three radio button/image sets plus the JavaScript that manages the images and button states.

You may remove or add more radio button/image sets according to the requirements or your implementation. See the note about that after the JavaScript source code box.

The Radio Button/Image Sets

Here is the source code for the three radio button/image sets. They are similar. The first is checked when the page loads.

See the customization notes below the source code.

<input 
    checked="checked" 
    type="radio" 
    id="RadioButtonFieldID1" 
    name="thisradio" 
    value="yes"
    style="display:none;">
<img 
    id="ImageRadioButtonFieldID1" 
    src="https://www.willmaster.com/library/images/checked-radio.jpg" 
    style="width:25px; height:25px; cursor:pointer; vertical-align:bottom;" 
    onclick="RadioButtonClicked('RadioButtonFieldID1','ImageRadioButtonFieldID1')">Fruit

<input 
    type="radio" 
    id="RadioButtonFieldID2" 
    name="thisradio" 
    value="yes"
    style="display:none;">
<img 
    id="ImageRadioButtonFieldID2" 
    src="https://www.willmaster.com/library/images/unchecked-radio.jpg" 
    style="width:25px; height:25px; cursor:pointer; vertical-align:bottom;" 
    onclick="RadioButtonClicked('RadioButtonFieldID2','ImageRadioButtonFieldID2')">Grain

<input 
    type="radio" 
    id="RadioButtonFieldID3" 
    name="thisradio" 
    value="yes"
    style="display:none;">
<img 
    id="ImageRadioButtonFieldID3" 
    src="https://www.willmaster.com/library/images/unchecked-radio.jpg" 
    style="width:25px; height:25px; cursor:pointer; vertical-align:bottom;" 
    onclick="RadioButtonClicked('RadioButtonFieldID3','ImageRadioButtonFieldID3')">Vegetables

Customization notes —

The three radio button/image sets each have (1) a radio button field that is not displayed on the page and (2) an image tag with JavaScript to change the checked image to an unchecked image, and vice versa, according to the user's action.

Each of the three sets are similar. The first one has the radio button checked, the last two not.

The style="display:none;" style of the three radio button fields hides the buttons from being seen. (The radio button images assume the role of being checked and unchecked.)

1. checked="checked"

   You'll see this in the source code only in the first of the three fields. checked="checked" checks the radio button when the page is first loaded.

2. RadioButtonFieldID1
RadioButtonFieldID2
RadioButtonFieldID3

   These are the id values of the radio button fields. You will also see them in the image tag's onclick attribute.

   If the id value gets changed in one place, it also needs to be changed in the other.

3. ImageRadioButtonFieldID1
ImageRadioButtonFieldID2
ImageRadioButtonFieldID3

   These are the id values of the image tags. You will also see them in the image tag's onclick attribute.

   If the id value gets changed in one place, it also needs to be changed in the other.

4. https://www.willmaster.com/library/images/checked−radio.jpg
https://www.willmaster.com/library/images/unchecked−radio.jpg

   The first URL above is the src URL of the radio button checked image. It is the image in the illustration that is displayed for the first radio button when the page is loaded.

   The second URL is the src URL for the other two radio buttons, a radio button unchecked image.

   Change the URLs to the checked and unchecked radio button images you will be using in your forms.

The CSS style for the images may, of course, be changed, as well as different images used.

The radio button field, the image ID values, and the image src URLs are also specified in the JavaScript. If any are changed, they need to be changed wherever they occur.

The JavaScript

Here is the JavaScript to manage the images and button states of the radio button/image sets.

<script type="text/javascript">
/*
    Radio Button Image Handler
    Version 1
    September 20, 2019
    Will Bontrager Software LLC
    https://www.willmaster.com
*/
/* Leave the next two lines as they are. */
var RadioCheckedImage = new Image();
var RadioUncheckedImage = new Image();

/* Customization section. */

// Provide the next two variables with the URLs 
//   of the checked radio button image and the 
//   unchecked radio button image.

RadioCheckedImage.src = "https://www.willmaster.com/library/images/checked-radio.jpg";
RadioUncheckedImage.src = "https://www.willmaster.com/library/images/unchecked-radio.jpg";

// Provide the next two array variables with 
//   the list of the radio button field ID 
//   values and the radio button image ID 
//   values. Each list should have the same 
//   number of items.

var ListOfRadioButtonFieldIDs = Array( "RadioButtonFieldID1", "RadioButtonFieldID2", "RadioButtonFieldID3" );
var ListOfRadioButtonImageIDs = Array( "ImageRadioButtonFieldID1", "ImageRadioButtonFieldID2", "ImageRadioButtonFieldID3" );

/* End of customization section. */

function RadioButtonClicked(fieldid,imageid)
{
    var len = ListOfRadioButtonFieldIDs.length;
    for( i=0; i<len; i++ )
    {
        document.getElementById(ListOfRadioButtonFieldIDs[i]).checked = false;
        document.getElementById(ListOfRadioButtonImageIDs[i]).src = RadioUncheckedImage.src;
    }
    document.getElementById(fieldid).checked = true;
    document.getElementById(imageid).src = RadioCheckedImage.src;
}
</script>

Notes —

The purple colored image src URLs are the same src URLs as occur in the image tags for the checked and unchecked images.

The three blue colored IDs and three red colored IDs are identical to the IDs of the three radio button/image sets.

If you decide to add more radio button/image sets, or remove one, then the id values will need to be changed in the JavaScript, too.

With this system, you are no longer limited to the various browser's default radio button designs. You can provide any images you want for the checked and unchecked states of the radio buttons.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager