(转)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 ...
随机推荐
- Mybatis返回HashMap时,某个字段值为null时,不会保存key
转载: http://blog.csdn.net/little2z/article/details/38525327 mybatis 的 callSettersOnNulls 问题项目用到mybati ...
- BZOJ4589 Hard Nim(快速沃尔什变换FWT)
这是我第一道独立做出来的FWT的题目,所以写篇随笔纪念一下. (这还要纪念,我太弱了) 题目链接: BZOJ 题目大意:两人玩nim游戏(多堆石子,每次可以从其中一堆取任意多个,不能操作就输).$T$ ...
- EasyUI 格式化列
以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式化一个数据网格(DataGrid)列,我们需要设置 ...
- eos 源码net_plugin分析
1 net_plugin_impl::connect(connection_ptr c) 函数用于解析地址,内部异步回调async_resolve async_resolve 传递了lambda表达式 ...
- Kubernetes HPA
简介 通过手工执行 kubectl scale 命令或者通过修改deployment的replicas数量,可以实现 Pod 扩容或缩容.但如果仅止于此,显然不符合 Google 对 Kubernet ...
- ElasticStack系列之十七 & 大文本搜索性能提升方案
1. 什么是大文本?具体是什么? 首先需要理解,ElasticSearch 建立索引完成全文检索的前提是将待检索的信息导入到 ElasticSearch 中.而有的信息对应的正文内容会非常的打,可能达 ...
- log4j2打印jdbcTemplate的sql以及参数
log4j2打印jdbcTemplate的sql以及参数 ——IT唐伯虎 摘要: log4j2打印jdbcTemplate的sql以及参数. 在log4j2.xml加上这两个logger即可: < ...
- bzoj千题计划291:bzoj3640: JC的小苹果
http://www.lydsy.com/JudgeOnline/problem.php?id=3640 dp[i][j] 表示i滴血到达j的概率 dp[i][j] = Σ dp[i+val[i]][ ...
- AngularJS 启程
<!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UT ...
- Java技术体系总结
PC前端:Javascript.JQuery.Angularjs.Reactjs.TypeScript 移动前端:Vue.js.Zepto WebJars spring:spring mvc.spri ...