crir={
init:function(){
arrLabels=document.getElementsByTagName('label');

searchLabels:
for(vari=0;i<arrLabels.length;i++){
//gettheinputelementbasedontheforattributeofthelabeltag
if(arrLabels[i].getAttributeNode('for')&&arrLabels[i].getAttributeNode('for').value!=''){
labelElementFor=arrLabels[i].getAttributeNode('for').value;
inputElement=document.getElementById(labelElementFor);
}
else{
continuesearchLabels;
}

inputElementClass=inputElement.className;

//iftheinputisspecifiedtobehiddenintiateit
if(inputElementClass=='crirHiddenJS'){
inputElement.className='crirHidden';

inputElementType=inputElement.getAttributeNode('type').value;

//addtheappropriateeventlistenertotheinputelement
if(inputElementType=="checkbox"){
inputElement.onclick=crir.toggleCheckboxLabel;
}
else{
inputElement.onclick=crir.toggleRadioLabel;
}

//settheinitiallabelstate
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'}
}
}
elseif(inputElement.nodeName!='SELECT'&&inputElement.getAttributeNode('type').value=='radio'){//thissoevenifaradioisnothiddenbutbelongstoagroupofhiddenradiositwillstillwork.
arrLabels[i].onclick=crir.toggleRadioLabel;
inputElement.onclick=crir.toggleRadioLabel;
}
}
},

findLabel:function(inputElementID){
arrLabels=document.getElementsByTagName('label');

searchLoop:
for(vari=0;i<arrLabels.length;i++){
if(arrLabels[i].getAttributeNode('for')&&arrLabels[i].getAttributeNode('for').value==inputElementID){
returnarrLabels[i];
breaksearchLoop;
}
}
},

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(labelclass)allradiosinthesamegroup
for(vari=0;i<arrInputs.length;i++){
inputElementType=arrInputs[i].getAttributeNode('type').value;
if(inputElementType=='radio'){
inputElementName=arrInputs[i].getAttributeNode('name').value;
inputElementClass=arrInputs[i].className;
//findradiobuttonswiththesame'name'astheonewe'vechangedandhaveaclassofchkHidden
//andthensetthemtounchecked
if(inputElementName==clickedInputElementName&&inputElementClass=='crirHidden'){
inputElementID=arrInputs[i].getAttributeNode('id').value;
labelElement=crir.findLabel(inputElementID);
labelElement.className='radio_unchecked';
}
}
}

//iftheradioclickedishiddensetthelabeltochecked
if(clickedInputElement.className=='crirHidden'){
clickedLabelElement.className='radio_checked';
}
},

addEvent:function(element,eventType,doFunction,useCapture){
if(element.addEventListener)
{
element.addEventListener(eventType,doFunction,useCapture);
returntrue;
}elseif(element.attachEvent){
varr=element.attachEvent('on'+eventType,doFunction);
returnr;
}else{
element['on'+eventType]=doFunction;
}
}
}

crir.addEvent(window,'load',crir.init,false);

在线演示http://img.jb51.net/online/checkbox/sample.html

打包下载CRIR.rar