相信很多人都用过jq的表单序列化serialize()方法,因为这能很方便地帮你把表单里所有的非禁用输入控件序列化为 key/value 对象,不需要你再去一个个地拼接参数了。

这是一个很好用的函数,用过的你肯定知道。但是ghostsf最近发现一个小bug(也许不应该叫bug,姑且称之)。就是当radio或checkbox 未选中时,没有序列化到对象中。

什么原因呢?下面分析之:
瞄一眼源码:From jQuery JavaScript Library v2.1.4

jQuery.fn.extend({
serialize: function() {
return jQuery.param( this.serializeArray() );
},
serializeArray: function() {
return this.map(function() {
// Can add propHook for "elements" to filter or add form elements
var elements = jQuery.prop( this, "elements" );
return elements ? jQuery.makeArray( elements ) : this;
})
.filter(function() {
var type = this.type;
// Use .is( ":disabled" ) so that fieldset[disabled] works
return this.name && !jQuery( this ).is( ":disabled" ) &&
rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) &&
( this.checked || !rcheckableType.test( type ) );
})
.map(function( i, elem ) {
var val = jQuery( this ).val();
return val == null ?
null :
jQuery.isArray( val ) ?
jQuery.map( val, function( val ) {
return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
}) :
{ name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
}).get();
}
});

不得不说代码写得很凝练。我们可以看到我们调用的serialize(),其实是走的param()方法,这个方法查阅jq手册即可得知,其作用是将数组或对象序列化为一个 key/value 对象。

显然这个方法不是我们要看的,重点就是serializeArray()了。
简单看下代码(只是简单看了下并未严格测试校验,可能有缺漏)。可以看到map里对于val的处理,判断到是数组的时候jQuery.isArray( val ) ?直接使用map进行了遍历,这个时候如果这个数组的length是0呢?那么自然当radio或checkbox 未选中时,这边的数组长度是为0的,所以这里就把radio或checkbox给漏掉了。

那么怎么解决呢?直接改源码?这也太粗暴了吧。

ghostsf心血来潮写了一个jq拓展,代码如下:(并不要脸地命名为ghostsf_serialize):

//为jquery.serializeArray()解决radio,checkbox未选中时没有序列化的问题
$.fn.ghostsf_serialize = function () {
var a = this.serializeArray();
var $radio = $('input[type=radio],input[type=checkbox]', this);
var temp = {};
$.each($radio, function () {
if (!temp.hasOwnProperty(this.name)) {
if ($("input[name='" + this.name + "']:checked").length == 0) {
temp[this.name] = "";
a.push({name: this.name, value: ""});
}
}
});
//console.log(a);
return jQuery.param(a);
};

怎么使用呢?
引入即可,然后就是你常用的

$(form).ghostsf_serialize()

了。

这样就很轻松地解决此问题了。自己动手丰衣足食。

转自:http://www.ghostsf.com/tools/389.html

(转)jquery serialize表单序列化,当radio或checkbox 未选中时,没有序列化到对象中的原因分析和解决方案 - ghostsf的更多相关文章

  1. jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用

    一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...

  2. Jquery form表单提交

    起因 由于项目中原先提交from是通过JavaScript指定action,在submit提交的,使用的方式,也不是很标准,造成除了ie之外的浏览器都不能正常的提交数据,做web项目还是要考虑到浏览器 ...

  3. jQuery formValidator表单验证插件

    什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...

  4. 通过AJAX和PHP,提交JQuery Mobile表单

    File name: callajax.php <?php $firstName = $_POST[firstName]; $lastName = $_POST[lastName]; echo( ...

  5. 第一百六十八节,jQuery,表单选择器

    jQuery,表单选择器 学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器 表单作为 HTML 中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以 使用之前的常规选择器或过滤器,也 ...

  6. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  7. jQuery Mobile 表单基础

    jQuery Mobile 会自动为 HTML 表单添加优异的便于触控的外观. jQuery Mobile 表单结构 jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样式,以使其 ...

  8. jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址

     一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...

  9. jQuery实现表单验证

    表单是网页的一个重要组成部分.本节做一个简单的表单提交网页然后利用jQuery实现表单的验证.后续的表单完善以及功能的完善会在以后的博客中给出. 效果图: 代码: <!DOCTYPE html ...

随机推荐

  1. BZOJ 3170 松鼠聚会(切比雪夫距离转曼哈顿距离)

    题意 有N个小松鼠,它们的家用一个点x,y表示,两个点的距离定义为:点(x,y)和它周围的8个点即上下左右四个点和对角的四个点,距离为1.现在N个松鼠要走到一个松鼠家去,求走过的最短距离. 思路 题目 ...

  2. SQL 优化经验总结34条

    我们要做到不但会写SQL,还要做到写出性能优良的SQL,以下为笔者学习.摘录.并汇总部分资料与大家分享!   (1) 选择最有效率的表名顺序(只在基于规则的优化器中有效): ORACLE 的解析器按照 ...

  3. Cuba项目从远程Git仓库下载步骤

    Cuba Studio 从Git远程仓库里下载代码,并且可以使用IDEA打开,需要注意的地方: 1.使用Git Gui克隆代码 也可以使用IDEA本身集成的Git下载,但是要保证:下载了项目以后,不能 ...

  4. MT【92】空间余弦定理解题

    评:学校常规课堂教学里很少讲到这个,有点可惜.

  5. 洛谷P4299 首都(BZOJ3510)(LCT,树的重心,二分查找)

    Update:原来的洛谷U21715已成坑qwq 已经被某位管理员巨佬放进公共题库啦!又可以多一个AC记录啦! 洛谷题目传送门 其实也可以到这里交啦 思路分析 动态维护树的重心 题目中说到国家的首都会 ...

  6. [BZOJ2957] [THU2013集训] 楼房重建

    套路套路套路套路套路套路套路套路套路套路... 我只能这么说:一道裸得只剩下套路的水题... 线段树维护单调栈,显然,能够看到的楼房一定是递增的,但不是按高度递增,而是按高度和坐标的比值递增 所以我们 ...

  7. 如何整合Office Web Apps至自己开发的系统(一)

    在前面我的一篇博客中 Office Web Apps安装部署(一),有一张介绍Office Web Apps与其他系统的关系图,   从上述图中,可知实际上Office Web Apps也是可以接入自 ...

  8. 收藏:Windows消息机制

    百度百科介绍的windows消息机制也不错:http://baike.baidu.com/view/672379.htm Windows的应用程序一般包含窗口(Window),它主要为用户提供一种可视 ...

  9. java使用POI实现excel文件的读取,兼容后缀名xls和xlsx

    需要用的jar包如下: 如果是maven管理的项目,添加依赖如下: <!-- https://mvnrepository.com/artifact/org.apache.poi/poi --&g ...

  10. Windows的DOS命令基础

    Windows的DOS命令基础 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 1.dir: 查看当前路径下的目录(directory)详细信息 . 详细信息: a>.dir ...