View Full Version : clicking a radio button

11-20-2006, 06:40 PM
I found a script lets you customise radio buttons by replacing the default style with desired images.

The radio button works fine, however, the problem is that it does not select itself when you click on the "radio" itself. It only selects when you click on the word which is associated with the radio button.

Below is the snippet from the .js file, which customises the buttons:

function replaceRadios() {
//get all the radio buttons on the page
var inputs = document.getElementsByTagName('input');
var j = 0;
for(var i=0; i < inputs.length; i++) {
if(inputs[i].type=='radio') {
radios[j] = inputs[i];

//cycle through the radio inputs
for(var i=0; i <radios.length; i++) {

//make them transparent
radios[i].className = "transparent";

//get their position
var x = findPosX(radios[i]);
var y = findPosY(radios[i]);

//build new div
var radioArea = document.createElement('div');
if(radios[i].checked) {radios[i].nextSibling.className = "chosen"; radioArea.className = "radioAreaChecked";}
else if(!radios[i].checked) {radioArea.className = "radioAreaUnchecked";}
radioArea.style.left = x + 'px';
radioArea.style.top = y + 'px';
radioArea.id = 'myRadio'+i;
radios[i].onclick = new Function('checkRadio('+i+')');

//insert div

What modifications can be done to this, so that the radio selectsd itself when clicked on the radio button AND the text assiciated with it?