JS複選框摺疊特效

 
  1. <html> 
  2. <head> 
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  4. <title>jQuery控制點擊複選框後,展開更多內容</title> 
  5. <script type="text/javascript" src="http://www.update8.com/images/js/jquery.min.js"></script> 
  6. <script type="text/javascript"> 
  7. $(document).ready(function(){ 
  8. $(".ss").hide(); 
  9. $("#check").click(function(){$(".ss").slideToggle("slow");}); 
  10. }); 
  11. </script> 
  12.  
  13. </head> 
  14.  
  15. <body class="body"> 
  16. <table border="0" width="100%"> 
  17.     <tr> 
  18.         <td width="100%" class="th"> 
  19.             <table> 
  20.                 <tr> 
  21.                     <td class="th">高級內容 </td> 
  22.                     <td class="th-left"><input type="checkbox" class="checkbox" id="check"></td> 
  23.                 </tr> 
  24.             </table> 
  25.  
  26.             <div class="ss"> 
  27.                 <table> 
  28.                     <tr> 
  29.                         <td class="th">性別:</td> 
  30.                         <td class="lth"> 
  31.                             <input type="radio" type="radio" name="sex" value="男">男 
  32.                             <input type="radio" name="sex" value="女">女 
  33.                         </td> 
  34.                     </tr> 
  35.                     <tr> 
  36.                         <td class="th">安全問題</td> 
  37.                         <td class="lth"> 
  38.                             <select> 
  39.                                 <option>安全問題</option> 
  40.                             </select> 
  41.                         </td> 
  42.                     </tr> 
  43.                     <tr> 
  44.                         <td class="th">回答答案</td> 
  45.                         <td class="lth"><input type="text"></td> 
  46.                     </tr> 
  47.                     <tr> 
  48.                         <td class="th">主頁</td> 
  49.                         <td class="lth"><input type="text"></td> 
  50.                     </tr> 
  51.                     <tr> 
  52.                         <td class="th">QQ</td> 
  53.                         <td class="lth"><input type="text"></td> 
  54.                     </tr> 
  55.                     <tr> 
  56.                         <td class="th">身份證號</td> 
  57.                         <td class="lth"><input type="text"></td> 
  58.                     </tr> 
  59.                 </table> 
  60.             </div> 
  61.         </td> 
  62.     </tr> 
  63. </table> 
  64. </body> 
  65. </html> 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章