jQuery显示用户输入信息

分别用JS和jQuery两种方法来显示用户输入信息

界面布局实现如下

<form>
姓名：<input  type="text" id="username">   <br/>
密码：<input  type="password" id="psd" maxlength="6"> <br/>
性别： <input type="radio" name="sex" value="男" checked="checked">男
            <input type="radio" name="sex" value="女">女  <br/>
爱好： <input type="checkbox" name="like" value="足球">足球
            <input type="checkbox" name="like" value="篮球">篮球
            <input type="checkbox" name="like" value="网球">网球 <br/>
专业：<select id="speciality">
        	<option value=""></option>
        	<option value="计算机">计算机</option>
        	<option value="软件工程" >软件工程</option>
        	<option value="网络工程">网络工程</option>
           </select><br/>
特长：<br/>
   <select id="master" size=3 multiple=true>
        <option value= ".NET编程" >.NET编程</option>
        <option value= "J2EE编程" >J2EE编程</option>
        <option value= "C语言编程" >C语言编程</option>
     </select><br/>
附件：<input id="myfile" type="file" ><br/>
简介：<br/> <textarea id="resume" cols="50" rows="10"> </textarea><br/>
<input  type="button"  value="显示录入值" id="btn1" >
<input  type="reset"  value="重填">
</form>

JS代码实现

<script>
	 
	 function GetRadioValue()//性别
  {  
       var obj;
       obj=document.getElementsByName("sex");
       if(obj!=null)
       {        
          for( var i=0; i<obj.length; i++)
            {
             if(obj[i].checked)
              return obj[i].value;  
            }
       }
    return null;

  }
  
  function GetCheckBoxValue()//爱好
  {  
       var obj,str="";
       obj=document.getElementsByName("like");
       if(obj!=null)
    {
        for(var i=0; i<obj.length; i++)
        {
            if(obj[i].checked)  
            str+=obj[i].value+","; //逗号分隔  
        }
    }
    if(str.length>0) 
    str=str.substring(0,str.length-1); //去掉最后一个逗号
    return str;
  }
	 
 function GetMultiSelectValue()//特长
  {   var obj,str="";    
      obj=document.getElementById("master");
      if(obj!=null)
      {
        for(var i=0; i < obj.length; i++)
        {
            if( obj.options[i].selected )
             str+=obj.options[i].value+",";            
        }
     }
    if(str.length>0) str=str.substring(0,str.length-1);
    return str;
}
	 
	 
   function show()
   {
    var obj,obj1,obj2,obj3,obj4;  
    obj=document.getElementById("username"); //姓名
    obj1=document.getElementById("psd");//密码
    obj2=document.getElementById("speciality");//专业
    obj3=document.getElementById("myfile");//附件
    obj4=document.getElementById("resume");//简介
    alert("姓名："+obj.value+"\n"+"密码："+obj1.value+"\n"+
          "性别："+GetRadioValue()+"\n"+"爱好："+GetCheckBoxValue()+"\n"+
         "专业："+obj2.value+"\n"+"特长："+GetMultiSelectValue()+"\n"+
          "附件："+obj3.value+"\n"+"简介："+obj4.value);
         
  }

  </script>

运行效果

jQuery实现

<link rel="stylesheet" type="text/css" href="styles.css">
<script src="scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
             $("#btn1").click(function () { 
              var str="";
              str="姓名："+$("#username").val()+"\n";
              str+="密码："+$("#psd").val()+"\n";
              str+="性别："+$(":radio[name='sex'][checked='true']").val()+"\n";
              var selstr="";
            $(":checkbox[name='like']:checked").each(function(){     
                 selstr+= $(this).val()+" "; 
              });

              str+="爱好："+selstr+"\n";
              str+="专业："+$("#speciality").val()+"\n";
              selstr="";
           $("#master option:selected").each(function(){     
               selstr+= $(this).val()+" "; 
             });


              str+="特长："+selstr+"\n";
              str+="附件："+$("#myfile").val()+"\n";
              str+="简介："+$("#resume").val()+"\n";   
              alert(str);
    });
});
</script>