2010年11月16日

收合式checkbox

以下展示收合式面板的作法,
實務上, 像是問卷因為選項很多,所以設計成按下某個checkbox後,下面相關的其他問題才會被展開;取消選取,則其他問題會再被隱藏起來‧

未按checkbox:
image
按checkbox:
image
實作如下:
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="950"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>無標題文件</title>
<script>
function showHideFun(){
if (document.form1.chk1.checked ) {
alert("checked");
SysSetMenu.style.display='';}
else
SysSetMenu.style.display='none';
}

</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<table width="200" border="1">
<tr>
<td> </td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="chk1" value="1" onClick="showHideFun()"/>
chk1</label>

<table table id="SysSetMenu" style="display:none;margin-left:25px;" cellspacing="2" cellpadding="0">
<tr>
<td><label>
<input type="checkbox" name="checkbox" value="checkbox" />
Q1</label></td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox2" value="checkbox" />            
Q2</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox3" value="checkbox" />
Q
3</td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form>
</body>
</html>

沒有留言:

張貼留言