웹마스터 팁

  2. Support
  3. 웹마스터 팁

행복한고니님의 체크박스를 이미지로 사용하기를 보고... 체크박스옆에 텍스트 부치기

2004.10.29 23:49

beMax

처음 고니님의 함수들 보고 정말 놀랬더랬습니다.

이런것도 있구나하구요..^^;;

msdn 들가보니까 있긴있더라구요..-ㅁ-;

그래서 함따라해봤습니다.

고니님이 하신건 체크박스를 이미지로 교체해서 표현하는거구요

저는 라이오 박스나 체크박스를 그냥 쓰되 바로엽에 글자를 넣어서 글자를 클릭해도 선택이 되게한겁니다.

아직 이런식으로 해본 경험이 없던 터라..많이 부족할겁니다.

사용방법은


<input type="radio" name="a" text="여기다 표시할 문자를 넣습니다.">
<input type="checkbox" name="b" text="여기다 표시할 문자를 넣습니다.">

스크립트는 가급적 <head>와 ~ </head> 사이에 넣으시구요
<body onload="LabelChoice()"> 하시거나
<input 태그가 마지막으로 끝나는 다음에
<script> LabelChoice() </script>
를 넣어주세요.

예제 ) http://maxpond.netcci.net/etc/LabelChoice.html

<script Language="JavaScript" type="text/JavaScript">
<!--

/* 라디오 버튼이나 체크박스를 찾아 변환 */
function LabelChoice(){
        var choice, span;
        inputs = document.getElementsByTagName( "INPUT" );                                                                        // 현재 문서의 엘리먼트중 input 태그만 가져오기
        for( i=0; i<inputs.length; i++ ){                                                                                                                                        //        가져온 인풋태그를 모두 확인
                if( inputs[i].type != "radio" && inputs[i].type != "checkbox" ) continue;                        // 뭘 확인? 라디오 버튼인지 체크버튼인지
                if( inputs[i].getAttribute("text") == null ) continue;                                                                                // text라는 어트리뷰트가 있는지
                LabelChoice.choiceBox[LabelChoice.choiceBox.length] = choice = inputs[i];                // 이벤트 처리를 위한 객체를 배열로 넣어둠
                LabelChoice.spans[LabelChoice.spans.length] = span = document.createElement( "SPAN" );        // 라벨을 위한 span 태그를 하나 만듬
                // span 태그의 글자를 text 어트리뷰트로 정의된 문자열로 채움
                span.innerHTML = choice.getAttribute("text");                                                                                        
                
                span.style.cursor = "hand";                                // span 태그 커서를 손모양으로
                if( choice.checked )                                                        // 기본값 확인
                        span.style.fontWeight = "bold";                // 체크됬으면 볼드체

                choice.oldOnClick = choice.getAttribute( "onclick" );                // 이미 지정된 onclick 이벤트 저장

                // 새 onclick 이벤트 등록
                span.onclick = new Function( "LabelChoice.onclick('"+(LabelChoice.choiceBox.length-1)+"', 1);" );
                choice.onclick = new Function( "LabelChoice.onclick('"+(LabelChoice.choiceBox.length-1)+"', 0);" );

                // 체크박스 또는 라디오 버튼 옆에 span 태그를 넣음
                choice.insertAdjacentElement( "afterEnd", span );        
        }
}

/* span 이나 라디오 버튼 클릭시 */
LabelChoice.onclick = function( idx, flag ){
        if( flag ){        // span 태그의 onclick 이벤트 발생시
                if( LabelChoice.choiceBox[idx].type == "checkbox" )                // 변환된 객체가 체크박스라면
                        LabelChoice.choiceBox[idx].checked = !LabelChoice.choiceBox[idx].checked;                // 반전체크
                else
                        LabelChoice.choiceBox[idx].checked = true;        // 라디오 버튼이면 항상 체크

                LabelChoice.choiceBox[idx].fireEvent( "onclick" );                // 라디오 또는 체크박스를 대상으로 onclick 이벤트 발생
                return;
        }
        
        choice = LabelChoice.choiceBox[idx];                        
        choiceSpan = LabelChoice.spans[idx];
        choice.oldOnClick();                                                                        // 기본으로 등록된 onclick 이벤트 먼저 실행
        if( choice.type == "radio" ){                                                // 라디오 버튼이면
                for( i=0; i<LabelChoice.choiceBox.length; i++ ){                                                                
                        if( choice.name != LabelChoice.choiceBox[i].name ) continue;                // 이벤트를 발생시킨 객체와 다른 그룹의 라디오 버튼이면 쌩~
                        LabelChoice.spans[i].style.fontWeight="";                                                                        // 아니면 span 태그의 글자체를 default 값으로
                }
        }

        choice.checked = choice.checked;                                        
        if( choice.checked )                                                                                        
                choiceSpan.style.fontWeight = "bold";                                        //볼드체로
        else
                choiceSpan.style.fontWeight = "";                                                // default 로
}

LabelChoice.choiceBox = [];
LabelChoice.spans = [];
//-->
</script>
<style>
body, span, input { font-size:12px }
</style>
<body onload="LabelChoice()">
<input type="radio" name="A" text="A 그룹 선택하기1"><br>
<input type="radio" name="A" text="A 그룹 선택하기2" checked><br>
<input type="radio" name="A" text="A 그룹 선택하기3"><br>
<p>
<input type="radio" name="B" text="B 그룹 선택하기1"><br>
<input type="radio" name="B" text="B 그룹 선택하기2"><br>
<input type="radio" name="B" text="B 그룹 선택하기3"><br>
<p>
<input type="checkbox" name="checkbox[]" text="이번엔 체크박스1"><br>
<input type="checkbox" name="checkbox[]" text="이번엔 체크박스2"><br>
<input type="checkbox" name="checkbox[]" text="이번엔 체크박스3"><br>
이 게시물을
수정 삭제
좋아요
목록
태그 쓰기