View Full Version : custom radio button images

02-06-2007, 05:34 PM
I'm in need of a script to replace a series of radio buttons within a "single select" string of choices. What this means is, I need to replace 4 radio buttons with a custom "non" and "on" selected image, that is unique to each of the 4 buttons.

Think of it this way: place 4 radio buttons in a row, and use a different "smiley" image to replace each button. When the user presses any of the four, a new "highlighted" image is seen. Obviously, only one of the four can be selected at any time, and there needs to be a function to toggle off the buttons that are not selected.

I have a script that was able to replace a series of two radio buttons, but I'm totally stumped how to make it work with four.

Would you be able to help?



02-06-2007, 05:35 PM
can you provide your code?

02-06-2007, 05:40 PM
Here you go:


// this sets the buttons (images) to use
var button1 = 'button1.jpg';
var button2 = 'button2.jpg';
var button1on = 'button1_on.jpg';
var button2on = 'button2_on.jpg';
// End of needed changes

var inputs;

function replaceChecks() {

//get all the input fields on the page
inputs = document.getElementsByName(whichQ);

//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) {

img.src = button1on;
img.src = button2on;

} else {
img.src = button1;
img.src = button2;

//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

function checkChange(i) {
if(inputs[i].checked) {
inputs[i].checked = '';
document.getElementById('checkImage'+i).src= button1;
document.getElementById('checkImage'+i).src= button2;

} else {
inputs[i].checked = 'checked';
document.getElementById('checkImage'+0).src= button1on;
document.getElementById('checkImage'+1).src= button2;
document.getElementById('checkImage'+0).src= button1;
document.getElementById('checkImage'+1).src= button2on;


setTimeout("replaceChecks()", 0);


EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum