Jquery对表单的常见操作

表单应用 一个表单有3个基本组成部分
表单标签：包含处理表单数据应用的服务器端程序URL以及数据提交到后台服务器的方法；
表单域：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框 ；
表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传输到服务器上或者取消传送，还可以用来控制其他定义了处理脚本 的处理工作。 单行文本框应用 前提是引入jquery的包 如：
<script type="text/javascript" src="../../../js/jquery-1.7.1.min.js"/>
<script type="text/javascript" src="../../../js/jquery-1.7.js"/>
获取或失去焦点改变样式
html代码
<form action="#"method="post"id="regForm">
       <fieldset>
          <legend>个人基本信息</legend>
          <div>
             <label for="username">名称：</label>
             <input id="username" type="text">         
          </div>
          <div>
            <label for="pass">密码：</label>
            <input id="pass" type="password">
          </div>
           <div>
            <label for="msg">详细信息</label>
            <textarea id ="msg" rows="3" cols="20"></textarea>
          </div>
       </fieldset>
    </form>

css代码
   <style type="text/css">
     .focus {
      border:1px solid #f00;
      background:#fcc;
     }
     input:focus,textarea:focus{
       border:1ps solid #f00;
       background:#fcc;      
      
     }
   </style> 
jQeruy代码
<script type="text/javascript">
  $(function(){
      $(":input").focus(function(){
        $(this).addClass("focus");     
      }).blur(function(){
        $(this).removeClass("focus");      
      })
   })   
    
</script>   


复选框应用 对复选框进行全选 反选 全不选等操作 html代码
html代码

<form>
      你爱好的运动是？<br/>
      <input type="checkbox" name="items"value="足球"/>足球
      <input type="checkbox" name="items"value="篮球"/>蓝球
      <input type="checkbox" name="items"value="羽毛球"/>羽毛球
      <input type="checkbox" name="items"value="乒乓球"/>乒乓球<br>
      <input type="button" id="CheckedAll"value="全选/全不选"/>     
      <input type="button" id="CheckedRev"value="反选"/>
      <input type="button" id="send"value="提交"/>
   </form>
jQuery代码

<script type="text/javascript">
  $(function(){
     //一个按钮控制全选/全不选（按钮id为CheckedAll）
      $("#CheckedAll").toggle(function(){
        $('[name=items]:checkbox').attr('checked',false);
       },function(){      
        $('[name=items]:checkbox').attr('checked',true);
       });

     //全选按钮
     $("#CheckedAll").click(function(){
        $('[name=items]:checkbox').attr('checked',true);
    });
    //全不选按钮
     $("#CheckedNo").click(function(){
        $('[name=items]:checkbox').attr('checked',false);
    });
     //反选按钮
     $("#CheckedRev").click(function(){
        $('[name=items]:checkbox').each(function(){
           $(this).attr("checked",!$(this).attr("checked"));       
        });
    });
     //获取选中的复选框的值
    $("#send").click(function(){
       var str="你选择的是：\r\n";
       $('[name=items]:checkbox:checked').each(function(){
          str+=$(this).val()+"\r\n";      
       })
      alert(str);   
    });

   })   
    
</script>
   
将选中的选项添加给对方 将全部的选项添加给对方 双击某个选项将其添加给对方
（这里仅做出了从左边添加到右边，其他的类似）
html代码
   <div align="left" style="margin-top:5px;position:absolute;">
      <select  multiple id="select1" style="width:150px;height:160px;">
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <option value="3">选项3</option>
        <option value="4">选项4</option>
        <option value="5">选项5</option>
        <option value="6">选项6</option>
        <option value="7">选项7</option>
        <option value="8">选项8</option>
      </select><br>
       <span id="add">选中添加到右边&gt;&gt;</span><br>
       <span id="add_all">全部添加到右边&gt;&gt;</span>
    </div>
     <div  style="margin-top:5px;margin-left:180px;position:absolute">
      <select  multiple id="select2" style="width:150px;height:160px;">     
      </select><br>
       <span id="remove">选中删除到左边&lt;&lt;</span><br>
       <span id="remove_all">全部删除到左边&lt;&lt;</span>
    </div>



jQuery代码
   <script type="text/javascript">
  $(function(){

   $("#add").click(function(){
   var $options = $("#select1 option:selected");//获取选中的选项
   var $remove = $options.remove();//删除下拉列表中选中的选项
   $remove.appendTo('#select2');//追加给对方     
    });
    $("#add_all").click(function(){
      var $options = $("#select1 option");//获取全部的选项   
      $options.appendTo('#select2');//追加给对方     
    });
    //双击选项添加给对方
    $("#select1").dblclick(function(){
        var $options = $("option:selected",this);//获取选中的选项
      var $remove = $options.remove();//删除下拉列表中选中的选项
      $remove.appendTo('#select2');//追加给对方     
   
    });

   })   
    
</script>




/*获得TEXT.AREATEXT的值*/    
   
var textval = $("#text_id").attr("value");   
//或者    
    
var textval = $("#text_id").val();  

  
/*获取下拉列表的值*/ 
    
var selectval = $('#select_id').val(); 
   
//文本框，文本区域：
   
$("#text_id").attr("value",'');//清空内容
  
$("#text_id").attr("value",'test');//填充内容  

//多选框checkbox：
 
$("#chk_id").attr("checked",'');//使其未勾选 

$("#chk_id").attr("checked",true);//勾选 

if($("#chk_id").attr('checked')==true) //判断是否已经选中 
//下拉框select：
  
$("#select_id").attr("value",'test');//设置value=test的项目为当前选中项  

$("<option value='test'>test</option><option
value='test2'>test2</option>").appendTo("#select_id") //添加下拉框的option  

$("#select_id").empty()；//清空下拉框