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:""
}