美文网首页
Jquery 序列化表单为对象

Jquery 序列化表单为对象

作者: 零知星 | 来源:发表于2020-03-07 10:59 被阅读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>
    
    输出结果

    相关文章

      网友评论

          本文标题:Jquery 序列化表单为对象

          本文链接:https://www.haomeiwen.com/subject/iujqdhtx.html