자바스크립트 라디오 버튼, 다중 선택 상자 미화 코드_양식 특수 효과

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

        searchLabels:
        for (var i=0; i          // 라벨 태그의 for 속성을 기반으로 입력 요소 가져오기
            만약 ( arrLabels[i].getAttributeNode('for') && arrLabels[i].getAttributeNode('for').value != '') {
              labelElementFor = arrLabels[i].getAttributeNode('for').value;                
               inputElement = document.getElementById(labelElementFor);
            }
            그렇지 않으면 {               
               계속 searchLabels;
            }    

            inputElementClass = inputElement.className;    

           // 입력이 숨겨지도록 지정된 경우
           if(inputElementClass =='crirHiddenJS') {
              inputElement.className = 'crirHidden';

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

               // 입력 요소에 적절한 이벤트 리스너를 추가하세요. onclick = crir.toggleCheckboxLabel;
               }
                else {
                 inputElement.onclick = crir.toggleRadioLabel;
               }

               // 초기 라벨 상태 설정
              (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') { // 따라서 라디오가 숨겨지지 않았지만 다음에 속하더라도 숨겨진 라디오 그룹은 여전히 ​​작동합니다.
                arrLabels[i].onclick = crir.toggleRadioLabel;
                inputElement.onclick = crir.toggleRadioLabel;
           }
        }            
    },    

    findLabel: 함수(inputElementID) 
        arrLabels = document.getElements ByTagName('라벨');

        searchLoop:
        for (var i=0; i           if (arrLabels[i].getAttributeNode('for') && arrLabels[i].getAttributeNode ('for').value == inputElementID) {               
               return arrLabels[i];
                break searchLoop;                
           }
        }        
    },    

    toggleCheckboxLabel: 함수()        labelElement = crir.findLabel(this.getAttributeNode ('id').값);

        if(labelElement.className == 'checkbox_checked') {
            labelElement.className = "checkbox_unchecked";
        }
        else {
            labelElement.className = "checkbox_checked";
        }
    },    

    toggleRadioLabel: function () {            
        clickedLabelElement = crir.findLabel(this.getAttributeNode('id').value);

        clickedInputElement = 이;
        clickedInputElementName = clickedInputElement.getAttributeNode('name').value;

        arrInputs = document.getElementsByTagName('input');

        // 동일한 그룹에 있는 모든 라디오(레이블 클래스)를 선택 취소합니다.
        (var i=0; i            if (inputElementType == 'radio') {
               inputElementName = arrInputs[i].getAttributeNode('name').value;
                inputElementClass = arrInputs[i].className;
              // 우리가 변경한 것과 동일한 '이름'을 가진 라디오 버튼을 찾고 chkHidden 클래스를
              //한 다음 선택 취소로 설정합니다
                if (inputElementName == clickedInputElementName && inputElementClass = = 'crirHidden') {               
                   inputElementID = arrInputs[i].getAttributeNode('id').value;
                   labelElement = crir.findLabel(inputElementID);
                   labelElement.className = 'radio_unchecked';
               }
            }
        }

       // 라디오가 숨겨진 경우 라벨을 선택
으로 설정합니다. clickedInputElement.className == 'crirHidden') {
            clickedLabelElement .className = 'radio_checked';
        }
    },

    addEvent: function(element, eventType, doFunction, useCapture){
        if (element.addEventListener) 
        {   element.addEventListener(eventType, doFunction, useCapture);
            true를 반환합니다.
        } else if (element.attachEvent) {
            var r = element.attachEvent('on'   eventType, doFunction);
            r을 반환합니다.
        } else {
            element['on'   eventType] = doFunction;
        }
    }
}

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

온라인 데모http://img.jb51.net/online/checkbox/sample. html

패키지 다운로드CRIR.rar