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>