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);