custom checkbox script

[mikewgd]

Hey! Its been awhile since I posted here, but I have a big problem. I made this script to create custom checkmarks and I dont understand why its not working. Im just starting out with Javascript and decided to give it a try.

Here is my code:

// declare variables or different states
			var off = 'images/check-off.png';
			var on = 'images/check-on.png';
			var normal = 'images/check-off.png'
			
			var radioImage = document.createElement('img');
			var r = 0;
			
			function replaceRadios(){
				
				var radios = document.getElementById('radio1');
				
				// finds all radio buttons with the class of radio
				radios.setAttribute("class","radio");
				
				if (radios.className == "radio") {
					
					// define r as 0, loop starts at 0, will continue as long as less than 10, and will be incremented 
					for (r < 10; r++;) {
						
						radios[r].type == 'radio';
						
						// if radio is checked configure the img src to var on
						if (radios[r].checked) {
							
							radioImage.src = on;
							
						} else {
							
							// otherwise configure the img src to var normal/off and give it a class of radio
							radioImage.src = normal;
							radioImage[className= 'radio'];
							
						}
						
						// give the image an id of radio
						radioImage[id = 'radio'];
						
						radioImage.onclick= radioStates('+r');
						
						radios[r].parentNode.insertBefore(radioImage,radios[r]);
						
						// hide the radio button to show image
						radios[r].setAttribute("class","hide");
						
					}
				}
			
				}
				
				
			function radioStates(r) {
				
				if(radios[r].checked='') {
					
					radioImage.setAttribute("class","radio off");
					
				} else if (radios[r].checked=true) {
					
					radioImage.setAttribute("class","radio on");
				
				} else if (radios[r].checked=false) {
					
					radioImage.setAttribute("class","radio off");
				
				} else {
					
					radios[r].checked=0;
					radioImage.setAttribute("class","radio off");
				}  
						
    		}
		
		setTimeout("replaceRadios()", 0);

[mikewgd]

Ok, I took at the for statement, but it keeps saying radios is null

function replaceRadios(){
				
				var radios = document.getElementById('radio1');
				
				// sets all radio buttons with the class of radio
				radios.setAttribute("class","radio");
				
				// define r as 0, loop starts at 0, will continue as long as less than 10, and will be incremented 
				//for (r < 10; r++;) {
						
					radios.type == 'radio';
						
					// if radio is checked configure the img src to var on
					if (radios.checked) {
							
						radioImage.src = on;
							
					} else {
						
						// otherwise configure the img src to var normal/off and give it a class of radio
						radioImage.src = normal;
						radioImage.className= 'radio';
							
					}
					
					// give the image an id of radio
					radioImage.id = 'radio';
				
					radioImage.onclick= radioStates;
						
					radios.parentNode.insertBefore(radioImage,radios);
						
					// hide the radio button to show image
					radios.setAttribute("class","hide");
						
				//}
			
			}
				
				
			function radioStates() {
				
				if(radios.checked='') {
					
					radioImage.setAttribute("class","radio off");
					
				} else if (radios.checked=true) {
					
					radioImage.setAttribute("class","radio on");
				
				} else if (radios.checked=false) {
					
					radioImage.setAttribute("class","radio off");
				
				} else {
					
					radios.checked=0;
					radioImage.setAttribute("class","radio off");
				}  
						
    		}
		
		setTimeout("replaceRadios()", 0);