jQuery实现点击单选按钮显示不同的div


<table width="80%" border="1" align="center">
  <tr>
   <td align="right">组队方式：</td >
 
    <td colspan="3">  
        <input id="Radio1" type="radio" />学校组队
        <input id="Radio2" type="radio" />模联协会组队
  <input id="Radio3" type="radio" />个人报名组队
</td>
  </tr>
    <div id="div1">
  <tr>
    <td align="right">参赛学生姓名： <td colspan="3"><input type="text" name="StuName" id="StuName" /></td>
    </tr>
  <tr>
    <td align="right">学校名称：</td>
    <td colspan="3"><input type="text" name="SchoolName" id="SchoolName" /></td>
    </tr>
  <tr>
    <td align="right">所在班级：</td>
    <td colspan="3"><input type="text" name="ClassName" id="ClassName" /></td>
    </tr>
</div>
<div id="div2">
  <tr>
    <td align="right">父亲/母亲手机号：</td>
    <td colspan="3"><input type="text" name="ParentPhone" id="ParentPhone" /></td>
    </tr>
  <tr>
    <td align="right">领队老师：</td>
    <td colspan="3"><input type="text" name="LeaderName" id="LeaderName" /></td>
    </tr>
 </div>
 
<div id="div3">
  <tr>
    <td align="right">模联协会负责人：</td>
    <td colspan="3"><input type="text" name="ZRName" id="ZRName" /></td>
    </tr>
</div>
  <tr>
    <td align="right">手机号：</td>
    <td><input type="text" name="Phone" id="Phone" /></td>
    </tr>
  <tr>
    <td align="right">E-mail：</td>
    <td><input type="text" name="Email" id="Email" /></td>
    </tr>
  <tr>
    <td colspan="2" align="center">
      <input type="submit" name="submit" id="submit" value="提交" />
      <input type="reset" name="reset" id="reset" value="重置" />
      </td>
    </tr>
</table>点击单选按钮，显示相关的div，比如点击“模联协会组队” div1显示，其他的隐藏，用jquery怎么实现！？

解决方案 »

  1.   

    首先说下 。
    <tr>外面是没有<div>的。
      

  2.   

    怎么讲？那怎么让div那块隐藏起来？
      

  3.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>radio2.html</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
         $(function () {
         $(":radio").click(function () {
         if (this.checked) {
         if ($(this).attr("id") == "Radio1") {
         $("#div1").show();
         $("#div2").hide();
         $("#div3").hide();
         }
         if ($(this).attr("id") == "Radio2") {
         $("#div1").hide();
         $("#div2").show();
         $("#div3").hide();
         }
         if ($(this).attr("id") == "Radio3") {
         $("#div1").hide();
         $("#div2").hide();
         $("#div3").show();
         }
         }
         });
         });
        </script>  </head>
      
      <body>
        <table width="80%" border="1" align="center">
      <tr>
       <td align="right">组队方式：</td >
     
        <td colspan="3">  
            <input id="Radio1" name="team" type="radio" checked="checked"/>学校组队
            <input id="Radio2" name="team" type="radio" />模联协会组队
       <input id="Radio3" name="team" type="radio" />个人报名组队
    </td>
      </tr>
      <tr>
      <td colspan="3">
      
        <div id="div1">
        <table>
      <tr>
        <td align="right">参赛学生姓名： <td colspan="3"><input type="text" name="StuName" id="StuName" /></td>
        </tr>
      <tr>
        <td align="right">学校名称：</td>
        <td colspan="3"><input type="text" name="SchoolName" id="SchoolName" /></td>
        </tr>
      <tr>
        <td align="right">所在班级：</td>
        <td colspan="3"><input type="text" name="ClassName" id="ClassName" /></td>
        </tr>
        </table>
    </div>
    <div id="div2" style="display: none;">
    <table>
      <tr>
        <td align="right">父亲/母亲手机号：</td>
        <td colspan="3"><input type="text" name="ParentPhone" id="ParentPhone" /></td>
        </tr>
      <tr>
        <td align="right">领队老师：</td>
        <td colspan="3"><input type="text" name="LeaderName" id="LeaderName" /></td>
        </tr>
        </table>
     </div>
     
    <div id="div3" style="display: none;">
    <table>
      <tr>
        <td align="right">模联协会负责人：</td>
        <td colspan="3"><input type="text" name="ZRName" id="ZRName" /></td>
        </tr>
        </table>
    </div>
    </td>
    </tr>
      <tr>
        <td align="right">手机号：</td>
        <td><input type="text" name="Phone" id="Phone" /></td>
        </tr>
      <tr>
        <td align="right">E-mail：</td>
        <td><input type="text" name="Email" id="Email" /></td>
        </tr>
     
      <tr>
      
        <td colspan="2" align="center">
          <input type="submit" name="submit" id="submit" value="提交" />
          <input type="reset" name="reset" id="reset" value="重置" />
          </td>
        </tr>
    </table>
      </body>
    </html>html标签不要随便嵌套;如：select下放其他标签，table中嵌套其他标签；
    radio name一致，表示是一组
      

  4.   


    <!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=utf-8" />
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript"  >
    $(document).ready(function(){
        $(":radio").click( 
    function (){ 
       var myId = $(this).attr("id").substring($(this).attr("id").length-1);
       $("table").children().children().hide();
       $("table").children().children().eq(0).show();
       var showClass = ".myClass"+myId;
       $(showClass).show();
    }); 
    }); 
    </script>
    <title>无标题文档</title>
    </head><body><table width="80%" border="1" align="center">
      <tr>
       <td align="right">组队方式：</td >
        <td colspan="3">  
            <input id="Radio1" type="radio" />学校组队
            <input id="Radio2" type="radio" />模联协会组队
      <input id="Radio3" type="radio" />个人报名组队
    </td>
      </tr>  <tr  class="myClass1">
        <td align="right">参赛学生姓名： <td colspan="3"><input type="text" name="StuName" id="StuName" /></td>
        </tr>
      <tr  class="myClass1">
        <td align="right">学校名称：</td>
        <td colspan="3"><input type="text" name="SchoolName" id="SchoolName" /></td>
        </tr>
      <tr  class="myClass1">
        <td align="right">所在班级：</td>
        <td colspan="3"><input type="text" name="ClassName" id="ClassName" /></td>
      </tr>
      <tr class="myClass2">
        <td align="right">父亲/母亲手机号：</td>
        <td colspan="3"><input type="text" name="ParentPhone" id="ParentPhone" /></td>
        </tr>
      <tr class="myClass2">
        <td align="right">领队老师：</td>
        <td colspan="3"><input type="text" name="LeaderName" id="LeaderName" /></td>
        </tr>
        
      <tr class="myClass3">
        <td align="right">模联协会负责人：</td>
        <td colspan="3"><input type="text" name="ZRName" id="ZRName" /></td>
        </tr>
      <tr class="myClass3">
        <td align="right">手机号：</td>
        <td><input type="text" name="Phone" id="Phone" /></td>
        </tr>
      <tr class="myClass3">
        <td align="right">E-mail：</td>
        <td><input type="text" name="Email" id="Email" /></td>
        </tr>
      <tr>
        <td colspan="2" align="center">
          <input type="submit" name="submit" id="submit" value="提交" />
          <input type="reset" name="reset" id="reset" value="重置" />
          </td>
        </tr>
    </table>