点击单选按钮显示不同的信息 用jquery实现


<table width="80%" border="1" align="center">
  <tr>
    <td align="right">组队方式：</td>
    <td><input type="radio" name="appsort" id="radio" value="radio" />
    学校组队</td>
    <td>
      <input type="radio" name="appsort" id="radio2" value="radio2" />
    模联协会组队</td>
    <td>
      <input type="radio" name="appsort" id="radio3" value="radio3" />
      个人报名组队</td>
  </tr>  <tr>
    <td align="right">参赛学生姓名：</td>
    <td colspan="3"><input type="text" name="textfield" id="textfield" /></td>
    </tr>
  <tr>
    <td align="right">学校名称：</td>
    <td colspan="3"><input type="text" name="textfield2" id="textfield2" /></td>
    </tr>
  <tr>
    <td align="right">所在班级：</td>
    <td colspan="3"><input type="text" name="textfield3" id="textfield3" /></td>
    </tr>  <tr>
    <td align="right">父亲/母亲手机号：</td>
    <td colspan="3"><input type="text" name="textfield4" id="textfield4" /></td>
    </tr>
  <tr>
    <td align="right">领队老师：</td>
    <td colspan="3"><input type="text" name="textfield5" id="textfield5" /></td>
    </tr>
 
 
  <tr>
    <td align="right">模联协会负责人：</td>
    <td colspan="3"><input type="text" name="textfield6" id="textfield6" /></td>
    </tr>  <tr>
    <td align="right">手机号：</td>
    <td colspan="3"><input type="text" name="textfield7" id="textfield7" /></td>
    </tr>
  <tr>
    <td align="right">E-mail：</td>
    <td colspan="3"><input type="text" name="textfield8" id="textfield8" /></td>
    </tr>
  <tr>
    <td colspan="4" align="center">
    <input type="submit" name="submit" id="button" value="提交" />
      <input type="reset" name="reset" id="button2" value="重置" />
      </td>
    </tr>
</table>

解决方案 »

  1.   

    $("input[type='radio']").each(function()
    {
     $(this).click(function(){
      alert($(this).val());
      $("#msg").html($(this).val());
    })}
    )
      

  2.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <script type="text/javascript" src="jquery-1.4.2.js"></script>
      <script type="text/javascript">
    $(function(){
    $("input[type='radio']").click(function(){
    var t=$(this).val();
    $("tr[name='m']").each(function(){
    if(this.id==t){
    $(this).show();
    }else{
    $(this).hide();
    }
    });
    });
    })
      </script>
     </HEAD> <BODY>
      <table width="80%" border="1" align="center">
      <tr>
        <td align="right">组队方式：</td>
        <td><input type="radio" name="appsort" id="radio" value="radio" />
        学校组队</td>
        <td>
          <input type="radio" name="appsort" id="radio2" value="radio2" />
        模联协会组队</td>
        <td>
          <input type="radio" name="appsort" id="radio3" value="radio3" />
          个人报名组队</td>
      </tr>  <tr>
        <td align="right">参赛学生姓名：</td>
        <td colspan="3"><input type="text" name="textfield" id="textfield" /></td>
        </tr>
      <tr>
        <td align="right">学校名称：</td>
        <td colspan="3"><input type="text" name="textfield2" id="textfield2" /></td>
        </tr>
      <tr>
        <td align="right">所在班级：</td>
        <td colspan="3"><input type="text" name="textfield3" id="textfield3" /></td>
        </tr>  <tr id="radio3" name="m">
        <td align="right">父亲/母亲手机号：</td>
        <td colspan="3"><input type="text" name="textfield4" id="textfield4" /></td>
        </tr>
      <tr id="radio" name="m">
        <td align="right">领队老师：</td>
        <td colspan="3"><input type="text" name="textfield5" id="textfield5" /></td>
        </tr>
     
     
      <tr id="radio2" name="m">
        <td align="right">模联协会负责人：</td>
        <td colspan="3"><input type="text" name="textfield6" id="textfield6" /></td>
        </tr>  <tr>
        <td align="right">手机号：</td>
        <td colspan="3"><input type="text" name="textfield7" id="textfield7" /></td>
        </tr>
      <tr>
        <td align="right">E-mail：</td>
        <td colspan="3"><input type="text" name="textfield8" id="textfield8" /></td>
        </tr>
      <tr>
        <td colspan="4" align="center">
        <input type="submit" name="submit" id="button" value="提交" />
          <input type="reset" name="reset" id="button2" value="重置" />
          </td>
        </tr>
    </table>
     </BODY>
    </HTML>
      

  3.   

    支持jquery,支持此楼:
    $("input[type='radio']").each(function()
    {
     $(this).click(function(){
      alert($(this).val());
      $("#msg").html($(this).val());
    })}
    )