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>
输出结果