라디오버튼으로 여러개의 폼 요소를 숨기거나 보이기
author 미랑 date 2005-09-09 hit 173 HIT
라디오버튼을 선택하면 여러개의 폼요소중 하나의 폼요소만 보이게 하고 다른 요소들은 숨겨 주는 스크립트 입니다
다양하게 응용될 수 있습니다

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="expires" content="-1">
<meta http-equiv="pragma" content="no-cache">
<title> jasko sample script </title>

<!---- [1단계] 아래 코드를 <HEAD> 와 <HEAD> 태그 사이에 붙여 넣으세요 --->

<STYLE TYPE="text/css">
        .initial {position:relative; visibility:hidden}
</STYLE>
</head>

<script language='Javascript'>
<!--
var MyDivisions=new Array(3);
MyDivisions[0]="DivSelect0";
MyDivisions[1]="DivSelect1";
MyDivisions[2]="DivSelect2";

// 계속 추가할 수 있습니다

  function ShowMe(index)
  {
   if (document.layers)   {
                             document.layers[index].visibility="show";                        
                             eval("document.FR"+index+".R"+index+".checked=true");
                             for (var u=0; u < MyDivisions.length;u++)
                             {
                                if ( u != index)
                                {
                                  document.layers[u].visibility="hidden";
                                  eval("document.FR"+u+".R"+u+".checked=false");
                                }
                             }
                          }
  
   else if (document.all) {
                             document.all(MyDivisions[index]).style.visibility="visible";
                             eval("document.FR"+index+".R"+index+".checked=true");
                             for (var u=0; u < MyDivisions.length;u++)
                             {
                                if ( u != index)
                                {
                                  document.all(MyDivisions[u]).style.visibility="hidden";
                                  eval("document.FR"+u+".R"+u+".checked=false");
                                }    
                             }
                            
                          }
  else if (document.getElementById) {
                             document.getElementById(MyDivisions[index]).style.visibility="visible";
                             eval("document.FR"+index+".R"+index+".checked=true");
                             for (var u=0; u < MyDivisions.length;u++)
                             {
                                if ( u != index)
                                {
                                  document.getElementById(MyDivisions[u]).style.visibility="hidden";
                                  eval("document.FR"+u+".R"+u+".checked=false");
                                }    
                             }
                            
                          }

   }

//-->
</script>

<!------------------------- 여기까지 ------------------------------------>

<body>

<!---- [2단계] 아래의 방법으로 <BODY> 와 <BODY> 태그 사이에 붙여 넣으세요 --->

<FORM NAME="FR0">
<input type="radio" value="Update"  name="R0" OnClick="ShowMe(0)"><b>클릭 하세요 -1</b></FORM>

          <div id="DivSelect0" class=initial>
                  <FORM NAME="FS0">
          <select size="1" name="Select0">
          <option value="Hello 1">Hello 1</option>
          <option value="2">12</option>
          <option value="3">13</option>
          </select>
                  </FORM>
          </div>


<FORM NAME="FR1">
<input type="radio" name="R1" value="Delete" OnClick="ShowMe(1)"><b>클릭 하세요 -2</b></FORM>

                 <div id='DivSelect1' class=initial>
                 <FORM NAME="FS1">
          <select size="1" name="Select1">
          <option value="Hello 1">Hello 2</option>
          <option value="2">21</option>
          <option value="3">22</option>
          </select>
                  </FORM>
        </div>

<FORM NAME="FR2">
<input type="radio" name="R2" value="Delete" OnClick="ShowMe(2)"><b>클릭 하세요 -3</b></FORM>

                 <div id='DivSelect2' class=initial>
                 <FORM NAME="FS2">
          <select size="1" name="Select2">
          <option value="Hello 1">Hello 3</option>
          <option value="2">21</option>
          <option value="3">22</option>
          </select>
                  </FORM>
        </div>

</body>
</html>


목록보기
        X  
38  위치고정 배너스크롤  2009-12-23 550
37  비트연산의 응용  2009-11-23 498
36  비트연산으로 다중값 처리하기  2009-11-23 498
35  다른 페이지에서 임의의 스트립트 실행하기  2009-11-23 485
34  웹페이지 소스보기와 드래그가 안 될 경우  2008-02-27 444
33  마우스 오버시 텍스트 링크 부분의 설명을 창으로  2008-02-16 457
32  팝업 공지 쿠키 설정  2006-11-26 502
31  새 창 띄우기 옵션 (window.open)  2006-11-25 284
30  스크롤 게시물 (솔로몬닷컴 방식)  2006-05-28 250
29  동적으로 textarea 추가하기  2006-05-26 310
28  강추! 셀렉트 박스 스타일 수정  2006-05-03 300
27  금액에 점찍고 한글 표시하기...  2006-05-03 351
26  마우스 클릭시 창 하단의 링크 주소 감추기  2006-05-03 354
25  팝업창 띄우기 옵션 및 방법  2006-05-02 304
24  주소를 입력받아서 이동하는 스크립트  2006-05-02 304
1 2 3