웹마스터 팁

  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>
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
Javascript + 플래시 칼라피커 [6] 행복한고니 2004.10.08
체크박스를 이미지로 사용하기 [7] 행복한고니 2004.10.10
배열 스크립트 종합선물세트 행복한고니 2004.10.12
멀티 파일다운로드 꼼수 (새창버전) [1] 행복한고니 2004.10.14
XP2인지 체크하여 XP2일때는 팝업허용하라는 메시지 뛰워주기 [3] 아돌 2004.10.19
모든 이미지, 텍스트 링크에 점선 없애기 [5] 이강민 2004.10.25
JavaScript 구문강조 효과내기 파우링 2004.10.28
행복한고니님의 체크박스를 이미지로 사용하기를 보고... 체크박스옆에 텍스트 부치기 [2] beMax 2004.10.29
ActiveX 멀티파일업로더 입니다. [9] by風 2004.11.01
홈페이지 나갈때 새창띄우기 [2] piasol 2004.11.07
(수정)배경음악,연월일,시간, 코멘트 셋트.(AM,PM==>오전,오후 순,한국식으로 ...) [4] 민피디 2004.11.10
ActiveX 플래시 이미지캡쳐 컨트롤 iFlower [1] 덴디 2004.11.15
iFlower 윈도우리스 플래시 ActiveX 컨트롤 덴디 2004.11.16
자바스크립트 암호화 [5] 손상모 2004.11.18
로딩중인 페이지에 효과넣기 [4] LUFFY 2004.11.20
이미지 를 브라우져에서 내맘데로 옮겨두기 [8] piasol 2004.12.03
이제 미디어플레이어는 가라? 곰플레이어로 실시간으로 감상하자. [13] ⓣing★™ 2004.12.05
홈페이지를 풀스크린으로 띄우자 - 올플래시로 보이는군요. [21] Multi_Taeji 2004.12.10
마우스를 대면 이미지가 바뀐다. 롤오버 이미지 [3] 하진 2004.12.19
개판 오분전 빙고 [2] 미친개 2004.12.30
태그 쓰기