Crir = {
Init: function (){
Arrlabels = Document. getelementsbytagname ('label ');
Searchlabels:
For (VAR I = 0; I <arrlabels. length; I ++ ){
// Get the input element based on the for Attribute of the label tag
If (arrlabels [I]. getattributenode ('for') & arrlabels [I]. getattributenode ('for '). value! = ''){
Labelelementfor = arrlabels [I]. getattributenode ('for'). value;
Inputelement = Document. getelementbyid (labelelementfor );
}
Else {
Continue searchlabels;
}
Inputelementclass = inputelement. classname;
// If the input is specified to be hidden intiate it
If (inputelementclass = 'crirhiddenjs '){
Inputelement. classname = 'crirhidden ';
Inputelementtype = inputelement. getattributenode ('type'). value;
// Add the appropriate event listener to the input element
If (inputelementtype = "checkbox "){
Inputelement. onclick = crir. togglecheckboxlabel;
}
Else {
Inputelement. onclick = crir. toggleradiolabel;
}
// Set the initial label state
If (inputelement. Checked ){
If (inputelementtype = 'checkbox') {arrlabels [I]. classname = 'checkbox _ checked '}
Else {arrlabels [I]. classname = 'Radio _ checked '}
}
Else {
If (inputelementtype = 'checkbox') {arrlabels [I]. classname = 'checkbox _ unchecked '}
Else {arrlabels [I]. classname = 'Radio _ unchecked '}
}
}
Else if (inputelement. nodename! = 'Select' & inputelement. getattributenode ('type '). value = 'Radio ') {// This so even if a radio is not hidden but belongs to a group of hidden radios it will still work.
Arrlabels [I]. onclick = crir. toggleradiolabel;
Inputelement. onclick = crir. toggleradiolabel;
}
}
},
Findlabel: function (inputelementid ){
Arrlabels = Document. getelementsbytagname ('label ');
Searchloop:
For (VAR I = 0; I <arrlabels. length; I ++ ){
If (arrlabels [I]. getattributenode ('for') & arrlabels [I]. getattributenode ('for'). value = inputelementid ){
Return arrlabels [I];
Break searchloop;
}
}
},
Togglecheckboxlabel: function (){
Labelelement = crir. findlabel (this. getattributenode ('id'). value );
If (labelelement. classname = 'checkbox _ checked '){
Labelelement. classname = "checkbox_unchecked ";
}
Else {
Labelelement. classname = "checkbox_checked ";
}
},
Toggleradiolabel: function (){
Clickedlabelelement = crir. findlabel (this. getattributenode ('id'). value );
Clickedinputelement = this;
Clickedinputelementname = clickedinputelement. getattributenode ('name'). value;
Arrinputs = Document. getelementsbytagname ('input ');
// Uncheck (Label class) All radios in the same group
For (VAR I = 0; I <arrinputs. length; I ++ ){
Inputelementtype = arrinputs [I]. getattributenode ('type'). value;
If (inputelementtype = 'Radio '){
Inputelementname = arrinputs [I]. getattributenode ('name'). value;
Inputelementclass = arrinputs [I]. classname;
// Find radio buttons with the same 'name' as the one we 've ve changed and have a class of chkhidden
// And then set them to unchecked
If (inputelementname = clickedinputelementname & inputelementclass = 'crirhidden '){
Inputelementid = arrinputs [I]. getattributenode ('id'). value;
Labelelement = crir. findlabel (inputelementid );
Labelelement. classname = 'Radio _ unchecked ';
}
}
}
// If the radio clicked is hidden set the label to checked
If (clickedinputelement. classname = 'crirhidden '){
Clickedlabelelement. classname = 'Radio _ checked ';
}
},
Addevent: function (element, eventtype, dofunction, usecapture ){
If (element. addeventlistener)
{
Element. addeventlistener (eventtype, dofunction, usecapture );
Return true;
} Else if (element. attachevent ){
VaR r = element. attachevent ('on' + eventtype, dofunction );
Return R;
} Else {
Element ['on' + eventtype] = dofunction;
}
}
}
Crir. addevent (window, 'load', crir. init, false );
Online Demo http://img.jb51.net/online/checkbox/sample.html
Package and download crir.rar