라디오버튼으로 여러개의 폼 요소를 숨기거나 보이기
미랑 · 2005-09-09 08:10:41
라디오버튼을 선택하면 여러개의 폼요소중 하나의 폼요소만 보이게 하고 다른 요소들은 숨겨 주는 스크립트 입니다
다양하게 응용될 수 있습니다
<!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>