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

   2023-03-08 学习力0
核心提示:相信很多人都用过jq的表单序列化serialize()方法,因为这能很方便地帮你把表单里所有的非禁用输入控件序列化为 key/value 对象,不需要你再去一个个地拼接参数了。这是一个很好用的函数,用过的你肯定知道。但是ghostsf最近发现一个小bug(也许不应该叫bug,

相信很多人都用过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

 

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • 邮箱自动提示Jquery 插件-实战.失败品
    看到很多 SNS 类网站都有 邮箱注册功能. 参考了一下技术过程,触发事件为 focus keyup 和 后缀 mousedown 事件基本匹配过程就可以完成了. 所以写了下面的代码. 对  万一用户 选择错误.目前很多SNS 站都是要 手动删除后另行选择.我就写一个 focus 替换函数. 
    03-08
  • JQuery——事件绑定bind和on的区别
    引言  通过JQuery对目标对象绑定事件我们大部分都是通过$('选择器').事件名()的形式实现,其实对事件的绑定还可以使用on和bind,为了搞明白两者之间的区别特做记录,以备以后查阅。正文  bind和on都是给元素绑定事件用的,但两者在使用时有些差别,我们最
    03-08
  • jQuery select操作
    获取Select选择的Text和Value:$("#select_id").change(function(){//code...});//为Select添加事件,当选择其中一项时触发var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Textvar checkValue=$("#select_id").val(); //获
    03-08
  • jquery转盘抽奖活动代码 js大转盘抽奖代码
    jquery转盘抽奖活动代码 js大转盘抽奖代码
    jquery仿各大商城网站圆形转盘抽奖活动,淘宝商城圆形转盘抽奖活动、天猫商城圆形转盘抽奖活动、京东商城圆形转盘抽奖活动等。 查看演示
    03-08
  • jquery仿京东商城商品分类导航菜单 jquery仿京东左侧菜单导航
    jquery仿京东商城商品分类导航菜单 jquery仿京
    jquery hover事件下拉菜单导航仿京东商城商品分类导航样式布局,通过鼠标滑过商品分类导航展示商品分类子菜单内容的效果。 查看演示
    03-08
  • jQuery SuperSlide插件制作72个种常用的网页特效
    jQuery SuperSlide插件制作72个种常用的网页特
    SuperSlide2.1 超级滑动门72个扩展效果 我¥19买的,分享给大家希望大家学会感恩 “什么?20个基础效果+72个扩展效果,做到狗一 样,才19?!太不值了,大爷我给你99!” -- “多谢大爷!” 19元并不贵,就当是对广大互联网默默耕耘者的一点支持与鼓励
    03-08
  • jquery多功能弹出层插件支持Ajax、确认对话框、二次弹出层等
    jquery多功能弹出层插件支持Ajax、确认对话框、
    jquery jBox弹出层插件制作确认对话框弹出层_ajax弹出层_底部浮动弹出层等 查看演示
    03-08
  • jQuery瀑布流实例无限滚动加载图片 瀑布流式页面布局代码
    jQuery瀑布流实例无限滚动加载图片 瀑布流式页
    jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例,通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果。 查看演示!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti
    03-08
  • 17种常用的jQuery全屏焦点图代码 jq 获取焦点
    jQuery全屏焦点图特效制作带标题的焦点图切换代码 jQuery背景和banner图片一起切换全屏焦点图切换代码 jQuery仿音悦台网站全屏带标题的焦点图轮播代码 jQuery响应式焦点图插件制作响应式全屏焦点图切换代码 jquery html5响应式幻灯片插件网站响应式全屏幻
    03-08
  • 6种非常酷炫的jquery banner焦点图片幻灯片切换
    6种非常酷炫的jquery banner焦点图片幻灯片切换
    jquery sequence slide滑动幻灯片插件6款时尚的图片滑动幻灯片切换 查看演示
    03-08
点击排行