Is it a checkbox or a radio button?
Part of the requirements doc for a subscription form I’ve designed for an internal client at work stated that the form must use checkboxes for a particular function. One of our Java programmers, Satish, who created the whole mail system said that it would be a lot easier for him if we could use radio buttons.
Fortunately I remembered seeing a tutorial some time ago which discussed using images to replace the radio buttons, making it possible for me to make it appear that there were checkboxes on the page, keeping the client happy, and retain the functionality of radio buttons, keeping the programmer happy.
The original code from BrainError was only for changing checkboxes but I also stumbled upon a solution andrew Main had provided that changed radio buttons as well.
I stripped the checkbox part of the code out and created some true/false checkbox images and now everyone is happy 
Here’s the code if you want to give it a go yourself… It’s not completely accessible in that tabbing through the buttons won’t work, but the form I’m working on uses so much Javascript already that it’s really not the end of the world.
/*
THE FOLLOWING CODE HaNDLES THE GRaPHICaL CHaNGES FOR RaDIO BUTTONS
*/
//global variables that can be used by aLL the functions on this page.
var inputs;
var imgRadioFalse = 'images/radio_unchecked.gif';
var imgRadioTrue = 'images/radio_checked.gif';
//this function runs when the page is loaded, put all your other onload stuff in here too.
function init() {
replaceRadios();
}
function replaceRadios() {
//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') == 'radio') {
//create a new image
var img = document.createElement('img');
//check if the checkbox is checked
if(inputs[i].checked) {
if(inputs[i].disabled)
{
img.src = imgRadioTrueDisabled;
} else {
img.src = imgRadioTrue;
}
} else {
if(inputs[i].disabled)
{
img.src = imgRadioFalseDisabled;
} else {
img.src = imgRadioFalse;
}
}
//set image ID and onclick action
img.id = 'radioImage'+inputs[i].id;
//set image click event if button not disabled
if(!inputs[i].disabled) img.onclick = new Function('radioChange('+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 radio status and the replacement image of checked and all in same group
function radioChange(i) {
var radios=new array();
var tmpradios;
// load all the inputs into tmp array
tmpradios = document.getElementsByTagName('input');
for(var j=0; j < tmpradios.length; j++) {
// add only the radios in this group to the array
if(tmpradios[j].getattribute('name') == inputs[i].getattribute('name'))
{
radios.push(tmpradios[j]);
}
}
if(inputs[i].checked) {
// already checked so do nothing as radio does not uncheck like a checkbox
} else {
// make all other group items unchecked
for(var j=0; j < radios.length; j++) {
document.getElementById
('radioImage'+radios[j].id).src=imgRadioFalse;
document.getElementById
('radioImage'+radios[j].id).checked='';
}
// make the selected item checked
inputs[i].checked = 'checked';
document.getElementById
('radioImage'+inputs[i].id).src = imgRadioTrue;
}
}
window.onload = init;
/*
END OF RaDIO BUTTON CODE
*/
</script>
Tomorrow I’m going to try and add to the code so that it will exclude radio buttons that I don’t want to change as at the moment it does a general sweep of the page and changes every radio button it finds. If you use the code be sure to give each of your radio buttons a unique ID so that the script can differentiate between which image to show when the checked state is changed. also remember to rename the image paths to match those of your own images.
Once again props go to BrainError and anthony Main, the first for coming up with the original checkbox code and the latter for adding radio button functionality.
February 8th, 2006 at 11:08 pm
[…] Interwebby.com « Is it a checkbox or a radio button? […]