radio button image replacement

[mikedhart]

hi. I am trying to replace my radio buttons with images. i have successfully done this, however, the radio buttons no longer function like radio buttons (i.e. they now function like check boxes.) does anyone have any ideas why? heres the link to the page

http://www.premihersportswear.co.uk/pro … _entristar

and heres the link to my js file

http://www.premihersportswear.co.uk/rad … eplacer.js

Mike

[Mr KiTT3N]

Code:

//change the radio button status and the replacement image
function statusChange(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;
}
}

Main issue is here…. whenever you change the status you need to loop threw all the radios and change them all to false….

Code:

// JavaScript Document

window.onload = init;

//These variables define the links to the images which will replace the radio button states.
var inputs[color=#FF0000],
radios[/color];
var imgFalse = ‘radioTest/images/datorixFalse.png’;
var imgTrue = ‘radioTest/images/datorixTrue.png’;

function init() {
replaceRadioButtons();
}

function replaceRadioButtons() {

//select all input fields
inputs = document.getElementsByTagName(‘input’);

//for loop to go through all of the radio buttons
for(var i=0; i < inputs.length; i++) { //if statement to check if the input type = radio if(inputs[i].getAttribute('type') == 'radio') { //getting the image id number so we can reset all of them radios[] = i; //create a new image var img = document.createElement('img'); //check if the radio button is checked if(inputs[i].checked) { img.src = imgTrue; //defined at top } else { img.src = imgFalse; //defined at top } //set image ID and onclick action img.id = 'checkImage'+i; //set image img.onclick = new Function('statusChange('+i+')'); //place image in front of the radio button inputs[i].parentNode.insertBefore(img, inputs[i]); //hide the radio button inputs[i].style.display='none'; } } } //change the radio button status and the replacement image function statusChange(i) { // for loop goes threw and changes all the images to false for(var i=0; i < radios.length; i++) { document.getElementById('checkImage' + radios[i]).src=imgFalse; } // all the images are false now so we take the clicked image and go true........ inputs[i].checked = 'checked'; document.getElementById('checkImage'+i).src=imgTrue; }

something like that…..

[Author]

Posts