Images Instead of Checkboxes

Similar to radio buttons (see article), sometimes the checkbox that browsers provide doesn't quite measure up to the design you want for your page.

with two images, displaying one or the other — 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 the checkbox image to see how it checks and unchecks.

Yes, I agree!

The above is somewhat similar to a browser's checkbox, similar enough to be recognized as a checkbox, especially for the unchecked state. The checked state has a more obvious check mark than browsers generally have for their native controls.

You may provide any images you want to represent the checked and unchecked states of checkboxes — huge, tiny, bold, subdued — even animated if you are so inclined.

Overview

The form checkbox field code has a CSS style display:none so it won't display on the page. But it will submit with the form data the way checkboxes do.

Instead of displaying the checkbox field, an image is displayed. The image either represents a checked checkbox or an unchecked checkbox.

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 value of the non-displayed checkbox field that the image corresponds to is checked or unchecked according to the image — so when the form is submitted, it has the correct checkbox information.

Switching the image and updating the checkbox 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.

JavaScript manages which checkbox image is displayed (checked or unchecked image) and also adjusts the checkbox field state (checked or unchecked state).

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

The Checkbox/Image Pair

Here is the source code for the checkbox/image pair. The checkbox is unchecked when the page first loads.

See the customization notes below the source code (which includes how to load the page with the checkbox pre-checked).

<input 
    type="checkbox" 
    id="Agreement"  
    name="agreement" 
    value="yes"
    style="display:none;"> 
<img 
    id="agreement-checkbox-image " 
    src="https://www.willmaster.com/library/images/unchecked-checkbox.jpg " 
    style="width:32px; height:33px; cursor:pointer; vertical-align:bottom;" 
    onclick="CheckboxButtonClicked('Agreement','agreement-checkbox-image')"><nobr>Yes, I agree!</nobr>

Customization notes —

The checkbox/image pair has (1) a checkbox field that is not displayed on the page and (2) an image tag with JavaScript to change the unchecked image to a checked image, and vice versa, according to the user's action.

The style="display:none;" style of the checkbox field hides the field from being seen. (The checkbox images assume the role of being checked and unchecked.)

1. Agreement

   This is the id value of the checkbox field. You will also see it 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.

2. agreement-checkbox-image

   This is the id value of the image tag. You will also see it 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. https://www.willmaster.com/library/images/unchecked-checkbox.jpg

   The URL above is the src URL of the checkbox unchecked image. It is the image in the illustration that is displayed when the page is loaded.

   Change the URL to the unchecked checkbox image you will be using in your forms.

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

To have a checked checkbox when the page first loads:

1. Insert this attribute into the non-displayed checkbox form field tag:

   checked="checked"
   

2. Change the unchecked checkbox image that loads when the page load to the checked checkbox image. Currently, this would be changing:

   https://www.willmaster.com/library/images/unchecked-checkbox.jpg

   to:

   https://www.willmaster.com/library/images/checked-checkbox.jpg

   Change the URL to your own checked checkbox image.

That will display a checked checkbox when the page first loads rather than the article's illustration of unchecked checkbox.

The JavaScript

Here is the JavaScript to manage the image switch and checkbox states of the checkbox/image pairs.

<script type="text/javascript">
/*
    Checkbox Image Handler
    Version 1
    October 1, 2019
    Will Bontrager Software LLC
    https://www.willmaster.com
*/
/* Leave the next two lines as they are. */
var CheckboxCheckedImage = new Image();
var CheckboxUncheckedImage = new Image();


/* Customization section. */
// Provide the next two variables with the URLs 
//   of the checked checkbox button image and the 
//   unchecked checkbox button image.

CheckboxCheckedImage.src = "https://www.willmaster.com/library/images/checked-checkbox.jpg";
CheckboxUncheckedImage.src = "https://www.willmaster.com/library/images/unchecked-checkbox.jpg";

/* End of customization section. */

function CheckboxButtonClicked(fieldid,imageid)
{
    if( document.getElementById(fieldid).checked == true )
    {
        document.getElementById(fieldid).checked = false;
        document.getElementById(imageid).src = CheckboxUncheckedImage.src;
    }
    else
    {
        document.getElementById(fieldid).checked = true;
        document.getElementById(imageid).src = CheckboxCheckedImage.src;
    }
}
</script>

Customization note — The purple colored image src URLs are the urls of the checked and unchecked images. Change the URLs to the corresponding checked and unchecked images on your server. The JavaScript switches them as indicated by user action.

With this system, you are no longer limited to the various browser-default checkbox designs. You can provide any images you want for the checked and unchecked states of the checkboxes.

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

Will Bontrager