Jquery 序列化表单为对象

2020-03-07  本文已影响0人  零知星
   <form action="#">
    <pre> 
           姓名: <input type="text" name='username'/>
           性别: <label for='sex1'> <input type="radio" name ='sex' id="sex1" value="男" checked/>男 </label> <label for="sex2"><input type="radio" name ='sex' id="sex2" value="女"/>女</label>    
           爱好: <label for="hoby1"><input type="checkbox" name="hoby" id="body1" value="reading">看书</label><label for="hoby2"><input type="checkbox" name="hoby" id="body2" value="writing">写字</label><label for="hoby3"><input type="checkbox" name="hoby" id="body3" value="gaming">玩游戏</label>
           描述: <textarea name="remark" cols="30" rows="10"></textarea>
           <button id="objserailize" type="button">序列化为对象</button>
    </pre>
   </form>
<script>
   $.fn.serializeObject = function (){
       var o ={};
       var a = this.serializeArray();
       $(a).each(function(){
           // 判断name是否已存在
           if(o[this.name]){
                // 判断是否checkbox第一个,如果是转化为数组
                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(){
        $("#objserailize").click(function(){
                var params = $('form').serializeObject();
                console.log(params);
        });

    })
</script>
输出结果
上一篇下一篇

猜你喜欢

热点阅读