1. <html> 
    2.  
         
  2. <head> 
    3.  
         
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    4.  
         
  4. <title>jQuery控制点击复选框后，展开更多内容</title> 
    5.  
         
  5. <script type="text/javascript" src="http://www.update8.com/p_w_picpaths/js/jquery.min.js"></script> 
    6.  
         
  6. <script type="text/javascript"> 
    7.  
         
  7. $(document).ready(function(){ 
    8.  
         
  8. $(".ss").hide(); 
    9.  
         
  9. $("#check").click(function(){$(".ss").slideToggle("slow");}); 
    10.  
         
  10. }); 
    11.  
         
  11. </script> 
    12.  
         
  12.  
    13.  
         
  13. </head> 
    14.  
         
  14.  
    15.  
         
  15. <body class="body"> 
    16.  
         
  16. <table border="0" width="100%"> 
    17.  
         
  17.     <tr> 
    18.  
         
  18.         <td width="100%" class="th"> 
    19.  
         
  19.             <table> 
    20.  
         
  20.                 <tr> 
    21.  
         
  21.                     <td class="th">高级内容 </td> 
    22.  
         
  22.                     <td class="th-left"><input type="checkbox" class="checkbox" id="check"></td> 
    23.  
         
  23.                 </tr> 
    24.  
         
  24.             </table> 
    25.  
         
  25.  
    26.  
         
  26.             <div class="ss"> 
    27.  
         
  27.                 <table> 
    28.  
         
  28.                     <tr> 
    29.  
         
  29.                         <td class="th">性别:</td> 
    30.  
         
  30.                         <td class="lth"> 
    31.  
         
  31.                             <input type="radio" type="radio" name="sex" value="男">男 
    32.  
         
  32.                             <input type="radio" name="sex" value="女">女 
    33.  
         
  33.                         </td> 
    34.  
         
  34.                     </tr> 
    35.  
         
  35.                     <tr> 
    36.  
         
  36.                         <td class="th">安全问题</td> 
    37.  
         
  37.                         <td class="lth"> 
    38.  
         
  38.                             <select> 
    39.  
         
  39.                                 <option>安全问题</option> 
    40.  
         
  40.                             </select> 
    41.  
         
  41.                         </td> 
    42.  
         
  42.                     </tr> 
    43.  
         
  43.                     <tr> 
    44.  
         
  44.                         <td class="th">回答答案</td> 
    45.  
         
  45.                         <td class="lth"><input type="text"></td> 
    46.  
         
  46.                     </tr> 
    47.  
         
  47.                     <tr> 
    48.  
         
  48.                         <td class="th">主页</td> 
    49.  
         
  49.                         <td class="lth"><input type="text"></td> 
    50.  
         
  50.                     </tr> 
    51.  
         
  51.                     <tr> 
    52.  
         
  52.                         <td class="th">QQ</td> 
    53.  
         
  53.                         <td class="lth"><input type="text"></td> 
    54.  
         
  54.                     </tr> 
    55.  
         
  55.                     <tr> 
    56.  
         
  56.                         <td class="th">×××号</td> 
    57.  
         
  57.                         <td class="lth"><input type="text"></td> 
    58.  
         
  58.                     </tr> 
    59.  
         
  59.                 </table> 
    60.  
         
  60.             </div> 
    61.  
         
  61.         </td> 
    62.  
         
  62.     </tr> 
    63.  
         
  63. </table> 
    64.  
         
  64. </body> 
    65.  
         
  65. </html> 
    66.