實務上, 像是問卷因為選項很多,所以設計成按下某個checkbox後,下面相關的其他問題才會被展開;取消選取,則其他問題會再被隱藏起來‧
未按checkbox:
按checkbox:
實作如下:
<%@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>
沒有留言:
張貼留言