util-1.表单相关操作(formUtil)

/**
 * ========================表单操作========================
 */
var formUtil = function(){
    /**
     * 表单序列化：serialize()方法通过序列化表单值，创建URL编码文本字符串。
     * First name: <input type="text" name="FirstName" value="Bill" />
     * Last name: <input type="text" name="LastName" value="Gates" />
     * 输出：FirstName=Bill&LastName=Gates
     */
  "serialize" : function(){
    return $("form").serialize();
  },
    /**
     * 表单序列化：serializeArray()方法通过序列化表单值来创建对象数组（名称和值）
     * First name: <input type="text" name="FirstName" value="Bill" />
     * Last name: <input type="text" name="LastName" value="Gates" />
     * 输出：[{"name":"FirstName","value":"Bill"},{"name":"LastName","value":"Gates"}]
     */
  "serializeArray" : function(){
    return $("form").serializeArray();
  },
    /**
     * 功能： 隐藏select中某些option(直接设置option的dipsplay:none;在android正常，ios无效)
     * 参数说明：
     * selectElem //需被控制的Select对象，
     * arrShow  //需显示的option序号(留空则不处理) eg:[0,1,3]，
     * arrHide //需隐藏的option序号(留空则不处理) eg:[2,4,6]
     * eg: toggleOptionShow($('#select2'),'',[0,1,3]);   //隐藏一,二,四
     * toggleOptionShow($('#select2'),[0,1,3],'');   //显示一,二,四
     */
  "toggleOptionShow": function(selectElem,arrShow,arrHide){
    function arrHandle(arr,type){
      if($.isArray(arr)){
        var len=arr.length;
        for(i=0;i<len;i++){
          var optionNow=selectElem.find("option").eq(arr[i]);
          var optionP=optionNow.parent("span");
          if(type=="show"){         
            if(optionP.size()){
              optionP.children().clone().replaceAll(optionP); 
            }       
          }else{
            if(!optionP.size()){
              optionNow.wrap("<span style='display:none'></span>");
            }
          }
        }
      }
    }

    arrHandle(arrShow,"show");
    arrHandle(arrHide,"hide");
  }
}


/**
* 将指定的form表单上的input、select、textarea的数据清除，隐藏框作为参数可选输入true/false或者是样式属性
* 取自jquery.form.js插件中的清空表单功能理解，提取出来可在需要的时候独立使用。
*/
$.fn.clearForm = function(includeHidden) {
    return this.each(function() {
        $('input,select,textarea', this).clearFields(includeHidden);    //this表示设置上下文环境，有多个表单时只作用指定的表单
    });
};

$.fn.clearFields = $.fn.clearInputs = function(includeHidden) {
    var re = /^(?:color|date|datetime|email|month|number|password|range|search|tel|text|time|url|week)$/i; // 正则表达式匹配type属性
    return this.each(function() {
        var t = this.type, tag = this.tagName.toLowerCase(); //获取元素的type属性和标签
        if (re.test(t) || tag == 'textarea') {
            this.value = '';
        }
        else if (t == 'checkbox' || t == 'radio') {
            this.checked = false;
        }
        else if (tag == 'select') {
            this.selectedIndex = -1;
        }
        else if (t == "file") {
            if (/MSIE/.test(navigator.userAgent)) {
                $(this).replaceWith($(this).clone(true));
            } else {
                $(this).val('');
            }
       }
       else if (includeHidden) {
            if ( (includeHidden === true && /hidden/.test(t)) ||
                 (typeof includeHidden == 'string' && $(this).is(includeHidden)) ) {   //true 、false或者样式属性
                this.value = '';
            }
        }
    });
};

/**
 * 1.select: 获取下拉框选中文本值
 */
var hotelname = $("select[name='hotelId']").find("option:selected").text(); //js: innerText
var selecttype = $("select")[0].opitons($("select")[0].selectedIndex).getAttribute("data-type");

/**
 * 2.radio: 获取单选框选中值
 */
$("input[name='radios']:checked").val();

/**
 * 3.radio: 设置值为n的单选框选项为选中项
 */
$("input:radio[value='n']").attr('checked','true');

/**
 * 4.checkbox: 是否选中
 */
$("input[type='checkbox']").attr("checked");

/**
 * checkbox: 看版本1.6+返回："checked"或"undefined";  1.5-返回：true或false
 */
$("input[type='checkbox']").prop("checked"); //1.6+返回：true/false
$("input[type='checkbox']").is(":checked");  //所有版本： true/false

/**
 * checkbox: 获取checkbox的checked方法
 */
$("input[type='checkbox']").is(":checked");
$("#checkbox_id").get(0).checked;
$("#checkbox_id").prop("checked");
$("#checkbox_id").attr("checked");
document.getElementById("checkbox_id").checked;

/**
 * checkbox: checkbox设置值: prop
 */
$("#checkbox_id").prop("checked","checked");
$("#checkbox_id").prop("checked",true);
$("#checkbox_id").prop({checked: true});
$("#checkbox_id").prop("checked",function(){return true;})

/**
 * checkbox: 选中事件监听
 */
$("#checkbox_id").change(function(){
    //....
});