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:

Code:
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];
			++j;
		}
	}
	
	//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
		document.getElementsByTagName("body")[0].appendChild(radioArea);
	}
}
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?


thanks,
VatsaL