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