本文總結(jié)了下在表單處理中單選、多選、選擇框值的獲取及表單的序列化，寫成了一個對象。如下：

var formUtil = {

  // 獲取單選按鈕的值，如有沒有選的話返回null

  // elements為radio類的集合的引用

  getRadioValue:function(elements) {

   var value = null; // null表示沒有選中項

   // 非IE瀏覽器

   if(elements.value != undefined && elements.value != '') {

    value = elements.value;

   } else {

    // IE瀏覽器

    for(var i = 0, len = elements.length; i < len; i++ ) {

     if(elements[i].checked) {

      value = elements[i].value;

      break;

     }

    }

   }

   return value;

  },

  // 獲取多選按鈕的值，如有沒有選的話返回null

  // elements為checkbox類型的input集合的引用

  getCheckboxValue:function(elements) {

   var arr = new Array();

   for(var i = 0, len = elements.length; i < len; i++ ) {

    if(elements[i].checked) {

     arr.push(elements[i].value);

    }

   }

   if(arr.length > 0) {

    return arr.join(',');

   } else {

    return null; // null表示沒有選中項

   } 

  },

  // 獲取下拉框的值

  // element為select元素的引用

  getSelectValue:function(element) {

   if(element.selectedIndex == -1) {

    return null; // 沒有選中的項時返回null

   };

   if(element.multiple) {

    // 多項選擇

    var arr = new Array(), options = element.options;

    for(var i = 0, len = options.length; i < len; i++) {

     if(options[i].selected) {

      arr.push(options[i].value);

     }

    }

    return arr.join(",");

   }else{

    // 單項選擇

    return element.options[element.selectedIndex].value;

   }

  },

  // 序列化

  // form為form元素的引用

  serialize:function(form) {

   var arr = new Array(),

   elements = form.elements,

   checkboxName = null;

   for(var i = 0, len = elements.length; i < len; i++ ) {

    field = elements[i];

    // 不發(fā)送禁用的表單字段

    if(field.disabled) {

     continue;

    }

    switch (field.type) {

     // 選擇框的處理

     case "select-one":

     case "select-multiple":

      arr.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(this.getSelectValue(field)));

      break;

     // 不發(fā)送下列類型的表單字段 

     case undefined :

     case "button" :

     case "submit" :

     case "reset" :

     case "file" :

      break;

     // 單選、多選和其他類型的表單處理  

     case "checkbox" :

      if(checkboxName == null) {

       checkboxName = field.name;

       arr.push(encodeURIComponent(checkboxName) + "=" + encodeURIComponent(this.getCheckboxValue(form.elements[checkboxName])));

      }

      break;

     case "radio" :

      if(!field.checked) {

       break;

      }

     default:

      if(field.name.length > 0) {

       arr.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));

      } 

    }

   }

   return arr.join("&");

  } 

 };

一個簡單的demo：

<form action="test_php.php" id="form1" name="form1" method="post" enctype="multipart/form-data">

  姓名：<input name="name" type="text" tabindex="1" /> <br>

  性別：<input name="sex" type="radio" value="男"/> 男 

    <input name="sex" type="radio" value="女" /> 女 <br>

  愛好：

  <input name="hobby" type="checkbox" value="籃球" /> 籃球

  <input name="hobby" type="checkbox" value="足球" /> 足球

  <input name="hobby" type="checkbox" value="乒乓球" /> 乒乓球

  <input name="hobby" type="checkbox" value="羽毛球" /> 羽毛球

  <br />

  年級：

  <select name="class" multiple>

   <option value="一年級">一年級</option>

   <option value="二年級">二年級</option>

   <option value="三年級">三年級</option>

  </select>

  <br />

   其他：

   <br />

   <textarea name="other" rows="5" cols="30" tabindex="2"></textarea>

   <br />

   <input type="reset" value="重置" />

   <input type="submit" value="提交" />

 </form>

 <div id="output"></div>

var form = document.getElementById("form1"),

 output = document.getElementById("output");

 // 自定義的提交事件

 EventUtil.addEventListener(form,"submit", function(event) {

  event = EventUtil.getEvent(event);

  EventUtil.preventDefault(event);

  var html = "";

  html += form.elements['name'].value + "<br>";

  html += formUtil.getRadioValue(form.elements['sex']) + "<br>";

  html += formUtil.getCheckboxValue(form.elements['hobby']) + "<br>";

  html += formUtil.getSelectValue(form.elements['class']) + "<br>";

  html += form.elements['other'].value + "<br>";

  html += decodeURIComponent(formUtil.serialize(form)) + "<br>";

  output.innerHTML = html;

 });

以上就是針對js表單處理中單選、多選、選擇框值的獲取及表單的序列化封裝的對象，希望對打擊的學習有所幫助。