js初始化表單數據

一、表單

<form id="myform" method="get"> 

<table width="50%" border="0"> 
    <tr> 
        <td> 
    姓名：  </td> 
        <td> 
            <input type="text" name="username" /></td> 
        </tr> 
    <tr> 
    <td> 
      書籍：    </td> 
    <td> 
      <input type="checkbox" name="book" value="01"/> 
            jquery 
      <input type="checkbox" name="book" value="02"/> 
         java 
      <input type="checkbox" name="book" value="03"/> 
         oracle    </td> 
        </tr> 
    <tr> 
          <td> 
      性別：    </td> 
    <td> 
      <label> 
      <input type="radio" name="sex" value="boy" /> 
         男</label> 
      <label> 
      <input type="radio" name="sex" value="girl" /> 
         女</label>    </td> 
    </tr> 
    <tr> 
        <td> 
    顏色：  </td> 
        <td>    <label for="select"></label> 
         <select name="color" id="select"> 
        <option>請選擇</option> 
        <option value="red">紅</option> 
        <option value="green">綠</option> 
        <option value="blue">藍</option> 
         </select>            </td> 
    </tr> 
    <tr> 
         <td> 
    備註：  </td> 
        <td> 
    <label for="textarea"></label> 
            <textarea name="addition" ></textarea>  </td> 
    </tr> 
    <tr> 
        <td colspan="2"> 
            <input type="button" name="padding" value="填充"/> 
    </td> 
        </tr> 
</table> 


</form>

二、純JS加載，form表單獲取數據

$(document).ready(function(){ 
        // 初始化一個對象 該對象的屬性要和form 對應的值對應 （其實這裏應該是ajax請求返回的對象）
        var obj = new Object(); 
        obj.username ="randy"; 
        obj.book="01,02"; 
        obj.sex="girl"; 
        obj.color="red"; 
        obj.addition="哥寫的不是代碼，是Curtain"; 
        $(":button").click(function(){ 
             for(var attr in obj){ //經過for in遍歷對象的全部屬性值
              if(typeof(obj[attr])=='function'){     //判斷屬性類型，必須不是function類型的屬性，才能賦值到表單上              
                continue; 
              } 
              var $input = $("#myform    :input[name='"+attr+"']"); //取的對應form下的對應表單
              var type = $input.attr("type");//獲取當前遍歷表單的類型                
              if(type=="checkbox" ||type=="radio"){ //若是是單選或者雙選就須要處理   
                  var avalues = obj[attr].split(","); //根據
                  for(var v=0; v<avalues.length;v++){ 
                    $input.each(function(i,n){ //經過jquery的each遍歷這種單選或者雙選的每個選項
                        var value = $(n).val();                         
                        if(value == avalues[v]){                        
                          $(n).attr("checked","checked"); //設置選中項
                        } 
                    }); 
                } 
              }else{ //爲類型爲type直接賦值
                $input.val(obj[attr]); 
              }    
            }            
        }); 
    }); 

</script>

附錄：源碼

https://yunpan.cn/cY9eZpWwaZPYJ  訪問密碼 5eda