Good stuff. I wrote the same thing about a year ago (before I learnt the ways of JSON unfortunately).

My script adds a bit more accessability stuff – like you can tab onto the checkbox elements and it outlines it. Perhaps you’d like to have a look at take some of those features back into your code.

http://www.flog.co.nz/lab/ARC/ARC.htm

did this a while back – same thing really; hide input and put a class on the label (but in only 33 lines):

@var transForms = {
init: function () {
var ls = document.getElementsByTagName(“label”);
for (var i=0, l; l=ls[i]; i++) transForms.labels[l.htmlFor] = l;
var e = document.getElementsByTagName(“input”);
for (var i=0, o; o=e[i]; i++) {
switch (o.type) {
case “checkbox”:
case “radio”:
o.style.display = “none”;
o.onchange = transForms.checkState;
transForms.setState(o);
break;
default:
break;
}
}
},
checkState: function () {
var r = [];
if (this.type==”radio”) {
var e = document.getElementsByTagName(“input”);
for (var i=0, o; o=e[i]; i++) if (o.name==this.name) r.push(o);
}
else r.push(this);
for (var i=0, o; o=r[i]; i++) transForms.setState(o);
},
setState: function (o) {
transForms.labels[o.id].className = o.type + ((o.checked) ? “Checked” : “”);
},
labels: []
}@

initiate calling transForms.init any way you like (body onload, window.onload, addevent…etc)

@Adam:
Thanks for the heads up I really appreciate it. I will take a look at your script and see if I can get the tabbing/space bar stuff working soon. That’s the major shortcoming of my CRIR right now.

@rasmus:
Does your script work in all browsers? how do the labels control the inputs when the inputs get hidden? This was one area that bothered me while writing this script. In Firefox even though an input is hidden the label will still trigger the input. However the same is not true for Internet Explorer and other browsers. So this fact alone adds some complexity to the script. I really wish all browsers worked the same way! Thanks for your input though, I may borrow some ideas from your script in the future.

Sure enough – I cut a corner and Internet Explorer bites my backside. ;)

My original tests also had inputs styled with zero opacity instead of having display: none.

But it’s fixed fairly easily; just add a style class “transFormsHidden” to the inputs looking like so:

.transFormsHidden {

position: absolute; left: -3000px; opacity: 0.0; _filter: alpha(opacity=0);
}

...and the fixed script:

var transForms = {

init: function () { var ls = document.getElementsByTagName(“label”); for (var i=0, l; l=ls[i]; i++) transForms.labels[l.htmlFor] = l; var e = document.getElementsByTagName(“input”); for (var i=0, o; o=e[i]; i++) { switch (o.type) { case “checkbox”: case “radio”: o.className = “transFormsHidden”; o.onchange = transForms.checkState; o.onclick = transForms.checkState;
transForms.setState(o); break; default: break; } } }, checkState: function () {
var r = []; if (this.type==”radio”) { var e = document.getElementsByTagName(“input”); for (var i=0, o; o=e[i]; i++) if (o.name==this.name) r.push(o); } else r.push(this);
for (var i=0, o; o=r[i]; i++) transForms.setState(o); }, setState: function (o) { transForms.labels[o.id].className = o.type + ((o.checked) ? “Checked” : “”); }, labels: [] }

Very nice and elegant stuff Chris – I was resigned about this topic but now the sky become more shiny ;)

Very nice, but what, if i have 4 pairs of icons, for display like radio buttons, in your css you have label.radio_checked, and other label.radio_unchecked , with respective image, but if i have 8 images, of 4 pairs of images. like some example:

Quiz of videogames:
1.- Fast: ( +_ +) ( ’_’ ) ( O_o) ( U_U)
2.- Funny ( +_ +) ( ’_’ ) ( O_o) ( U_U)

etc, and when the user select one, this convert in image checked. I need to do that, but, need help.