jquery的Form表单序列化到一个对象 (当radio,checkbox 未选中时，没有序列化到对象中的解决方案）

表单序列化介绍

不少人都使用过jquery的serializeobject或serializeArray用来作表单的自动序列化到一个object对象。
这里我也作个简单的介绍，好比有一个表单以下：

经常使用的序列化js代码:

$.fn.serializeObject = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
    if (o[this.name] !== undefined) {
        if (!o[this.name].push) {
            o[this.name] = [o[this.name]];
        }
        o[this.name].push(this.value || '');
    } else {
        o[this.name] = this.value || '';
    }
});
return o;
};


function saveForm(){
  var obj = $("#formDemo").serializeObject();
  console.log(obj);
}

获取输出的obj以下(而后就能够经过ajax去保存数据了):

当radio,checkbox 未选中时存在的问题和解决办法

通常状况下，这样去序列化数据没有什么问题，顺利保存就行了，可是有一种更新的状况下会致使问题。
设想刚才咱们已经保存了这我的的爱好是运动和旅游，可是当咱们不选择任何一项兴趣，保存数据结构就会变成这样

{
    age:"18",
    nickname:"tangolivesky",
    sex:"1"
}

有没有发现hobby这个字段没有存在于数据结构中，当你把这样的数据传到后台，通常后台也是经过循环传过来的json结构去更新数据库，把须要更新的作update处理，这样hobby这个字段就没有更新掉。 等从新加载数据，游戏，运动，旅游仍是选中的。 :(

既然有这个问题，那就解决这个问题，把serializeObject作一个改动:

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    var $radio = $('input[type=radio],input[type=checkbox]',this);
    $.each($radio,function(){
        if(!o.hasOwnProperty(this.name)){
            o[this.name] = '';
        }
    });
    return o;
};

输出的结构就对了：

{
    age:"18",
    hobby:"",
    nickname:"tangolivesky",
    sex:""
}