Version 2.0, August 28, 2004

Vote for this script!

Are you using this script on your website?

Let me know and I will place a link here!

BrainError demo page

No need to change your HTML! Just embed it and all your checkboxes will be raplecd with your own custom image!

Changing checkboxes 2

Changing the appearance of checkboxes

With the use of CSS you can control hoe forms on your website look, however certain items like checkboxes, radio buttons and selects cannot be altered, they are rendered by the visitors operating system. There is no way to get around it.

The key to changing their appearance is by not by displaying checkboxes at all, use an image instead, and glue it together with a few lines of JavaScript.

Check these checkboxes!

Take a look at these checkboxes. They look like an image, but if you look in the soure code you will see normal checkboxes!

Click here for a demonstration!

How it works

Basically, it are just normal checkboxes. But when the page is loaded a JavaScript will scan the page for checkboxes and hide them and place an image on the same position.

If you click on the image, it loads another image and changes the setting of the hidden checkboxes.

Installation

To use this script you don't need to change any HTML. Just insert the JavaScript and all the checkboxes on the page will be affected!

To add checkbox.js to your page just place the javascript file in your directory and add this between the <head> tags on top of your page:

<script type="text/javascript" src="checkbox.js"></script>

Browser compatibility

This script works in al recent versions of Microsoft Internet Explorer, Mozilla/Netscape and Opera.

Browsers that do not support advanced JavaScripting and/or CSS will just see the normal checkboxes.

I think it will work in Safari/Konquerer too, but I can't test that.

Show me the code

This is the content of checkbox.js. You don't need to understand it, just embed it in your page and it will work. If you do want to know how it works, just read the comments.

The only thing you may need to change is the path to the images. Just change true.png and false.png so that they point to your images.

//global variables that can be used by ALL the function son this page.
var inputs;
var
imgFalse = 'false.png';
var
imgTrue = 'true.png';

//this function runs when the page is loaded, put all your other onload stuff in here too.
function init() {
    
replaceChecks();
}

function
replaceChecks() {
    
    
//get all the input fields on the page
    
inputs = document.getElementsByTagName('input');

    
//cycle trough the input fields
    
for(var i=0; i < inputs.length; i++) {

        
//check if the input is a checkbox
        
if(inputs[i].getAttribute('type') == 'checkbox') {
            
            
//create a new image
            
var img = document.createElement('img');
            
            
//check if the checkbox is checked
            
if(inputs[i].checked) {
                
img.src = imgTrue;
            } else {
                
img.src = imgFalse;
            }

            
//set image ID and onclick action
            
img.id = 'checkImage'+i;
            
//set image
            
img.onclick = new Function('checkChange('+i+')');
            
//place image in front of the checkbox
            
inputs[i].parentNode.insertBefore(img, inputs[i]);
            
            
//hide the checkbox
            
inputs[i].style.display='none';
        }
    }
}

//change the checkbox status and the replacement image
function checkChange(i) {

    if(
inputs[i].checked) {
        
inputs[i].checked = '';
        
document.getElementById('checkImage'+i).src=imgFalse;
    } else {
        
inputs[i].checked = 'checked';
        
document.getElementById('checkImage'+i).src=imgTrue;
    }
}

window.onload = init;

Download the script

Click on the button to download the JavaScript source!

How not to piss me off

Scripts shown here can be copied, used and altered as you please. However, I don't like other people taking credit for my work. It really pisses me off. I'm a real bad ass person, once I feel pissed off. So here are the rules:

  1. Don't distribute the scripts publicly, I am already doing that for you.
  2. Don't claim that they're your own, because they're not (unless you altered them a lot). That means when you get money for it, I have done work for you and you have to give all your money to me.

JZ
September 1, 2004 @ 12:13 PM

I don't mind sharing if someone asks. Because we can't and don't know everything.
But, I have been pissed off for 20 years by people taking credit for my work.
So I understand where you are ocming from
JZ

Pimped
September 13, 2004 @ 7:05 AM

Try adding a few comments in your code with copyright notices.. When people use your code most times they will leave the copyright notices, etc in the code.

jeff
December 7, 2004 @ 2:19 PM

I was with you 100% on how not to piss you off, but then you say "you have to give all your money to me"... Look, most people who want to use this code are going to do so as a minor part of a total solution package they are offering to their customers... It's unreasonable for you to request "ALL" of their money...if you simply said something to the effect of... "if you profit in any way by using my code, I would appreciate compensating me in a way you feel reasonable".. then I'll bet you get much better responses and people wanting to compensate you for helping them.

Moogie Moogie on the web
February 25, 2005 @ 1:26 PM

Fantastic script, thanks so much for sharing! I was so annoyed when I found out I couldn't make my checkboxes match the rest of my design, but now I can and they're even better. Great job!

March 28, 2005 @ 8:25 PM

great script but would it be possible to check for checkboxes with a certain ID? And maybe even to check for a certain ID and change the checkbox to x.jpg or y.jpg depepending on the ID?

April 7, 2005 @ 7:45 AM

i was woundering if theres a fairly easy way to set this up for two instances such as checkboxes and ratio buttons, by making a small mod to the key names like checkbox and some of the functions in the script i have been able to get it to work with the radio but not with both at the same time also java script on function calls i had working on IE but NS gave me errors because it asigned a anonymous function to it well if your interisted in improving this script alittle with me and could help me a bit lets do it

September 17, 2005 @ 4:23 PM

thx brainerror!

i added the radiobuttons functionality and the ability to use different images for checkboxes and radiobuttons.

only thing to do is:
- adding working labels
- rewrite faster script and little config on top

If anyone wants this script (maybe BrainError could post it after a check) mail me...

December 6, 2005 @ 8:50 AM

Just small modification, quite logical one :-)

change:

if(inputs[i].getAttribute('type') == 'checkbox')
to:
if(inputs[i].getAttribute('type') == 'checkbox' || inputs[i].getAttribute('type') == 'radio') {

and it also works on radio buttons.

Great script dude!

December 8, 2005 @ 6:56 AM

Kewl script! 1 thought about it working for radio buttons, normally you can only select 1 radio button from the group, using the script however multiples can be selected (don't know what happens on submission, haven't tried that!).
Would the fix so only one can be selected be hard?
Thanks for the checkboxes anyway!

Peter
February 24, 2006 @ 12:16 PM

Well... works in Safari for me! (i'm using 2.0.3)great script!

Comments are disabled until furter notice because of huge amounts of spam being placed here.