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.
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:
-
The image is changed from the checked version to the unchecked version, or vice versa.
-
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/
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/
The Checkbox/Image Pair
Here is the source code for the checkbox/
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/
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.)
-
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.
-
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.
-
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:
-
Insert this attribute into the non-displayed checkbox form field tag:
checked="checked"
-
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/
<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