(转)jquery serialize表单序列化,当radio或checkbox 未选中时,没有序列化到对象中的原因分析和解决方案 - ghostsf
相信很多人都用过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的更多相关文章
- jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用
一.jQuery Form的其他api 1. formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...
- Jquery form表单提交
起因 由于项目中原先提交from是通过JavaScript指定action,在submit提交的,使用的方式,也不是很标准,造成除了ie之外的浏览器都不能正常的提交数据,做web项目还是要考虑到浏览器 ...
- jQuery formValidator表单验证插件
什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...
- 通过AJAX和PHP,提交JQuery Mobile表单
File name: callajax.php <?php $firstName = $_POST[firstName]; $lastName = $_POST[lastName]; echo( ...
- 第一百六十八节,jQuery,表单选择器
jQuery,表单选择器 学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器 表单作为 HTML 中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以 使用之前的常规选择器或过滤器,也 ...
- ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- jQuery Mobile 表单基础
jQuery Mobile 会自动为 HTML 表单添加优异的便于触控的外观. jQuery Mobile 表单结构 jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样式,以使其 ...
- jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
- jQuery实现表单验证
表单是网页的一个重要组成部分.本节做一个简单的表单提交网页然后利用jQuery实现表单的验证.后续的表单完善以及功能的完善会在以后的博客中给出. 效果图: 代码: <!DOCTYPE html ...
随机推荐
- Hbase远程连接:Can't get the locations
当Java API远程连接出错:Can't get the locations 原先填入的是IP地址,后来改为HOSTS文件中配置的主机名问题解决,如下红色字体部分: conf.set("h ...
- Educational Codeforces Round 35 (Rated for Div. 2)A,B,C,D
A. Nearest Minimums time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- Spring中ClassPathXmlApplication与FileSystemXmlApplicationContext的区别以及ClassPathXmlApplicationContext 的具体路径
一.ClassPathXmlApplicationContext 的具体路径 String s[] = System.getProperty("java.class.path"). ...
- jquery 绑定文本即时查询功能
bindFilterFunc: function () { if ("\v" == "v") { // IE only ...
- WCF trace、log
1. 打开wcf配置: 2. enable trace , log 可以改变log路径: 3. 用 SvcTraceViewer.exe (直接在c盘下搜索) 查看 4. 如果想自定义trac ...
- LOJ#2983. 「WC2019」数树
传送门 抄题解 \(Task0\),随便做一下,设 \(cnt\) 为相同的边的个数,输出 \(y^{n-cnt}\) \(Task1\),给定其中一棵树 设初始答案为 \(y^n\),首先可以发现, ...
- 迭代器Iterator与ConcurrentModificationException详解
背景:一直以来对迭代器的问题理解不是很透彻,特别是迭代器和异常ConcurrentModificationException之间的联系.通过debug,详细了解其底层的具体实现过程. 简介 Itera ...
- linux driver error ------ 编译驱动出现 ERROR: Kernel configuration is invalid
ERROR: Kernel configuration is invalid. include/generated/autoconf.h or include/config/au ...
- linux ------ 使用 TFTP 在两个主机之前传输文件
TFTP是用来下载远程文件的最简单网络协议,它是基于UDP协议而实现.嵌入式linux的tftp开发环境包括两个方面:一是linux服务器端的tftp-server支持,二是嵌入式目标系统的tftp- ...
- python实现windows Service服务程序
python实现windows Service服务程序 win32serviceutil.ServiceFramework是封装得很好的Windows服务框架,本文通过继承它来实现. 通过SvcDoR ...