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
【javascript 单选框，多选框美化代码】相关文章：
★ javascript实现table选中的行以指定颜色高亮显示