Skip to content
August 24, 2010 / Thomas Danemar

JQuery Serialize Method and Checkboxes

JQuery’s serialize method is handy when you want to convert the values of a form to a standard URL encoded query string, like so:

$("#myform").serialize(); // 'a=1&b=2&c=3'

However, only successful controls are included in the query string. That means checkboxes may not be serialized the way you expect them to. Checked checkboxes will be included with name only, and unchecked boxes won’t be included at all. So while you may expect a query string like:

'checkbox1=true&checkbox2=false'

What you’ll actually get is:

'checkbox1='

Sometimes you want the true/false type string though. Here’s a plugin that replaces the standard jQuery serialize with one that returns just that:

(function ($) {

     $.fn.serialize = function (options) {
         return $.param(this.serializeArray(options));
     };

     $.fn.serializeArray = function (options) {
         var o = $.extend({
         checkboxesAsBools: false
     }, options || {});

     var rselectTextarea = /select|textarea/i;
     var rinput = /text|hidden|password|search/i;

     return this.map(function () {
         return this.elements ? $.makeArray(this.elements) : this;
     })
     .filter(function () {
         return this.name && !this.disabled &&
             (this.checked
             || (o.checkboxesAsBools && this.type === 'checkbox')
             || rselectTextarea.test(this.nodeName)
             || rinput.test(this.type));
         })
         .map(function (i, elem) {
             var val = $(this).val();
             return val == null ?
             null :
             $.isArray(val) ?
             $.map(val, function (val, i) {
                 return { name: elem.name, value: val };
             }) :
             {
                 name: elem.name,
                 value: (o.checkboxesAsBools && this.type === 'checkbox') ? //moar ternaries!
                        (this.checked ? 'true' : 'false') :
                        val
             };
         }).get();
     };

})(jQuery);

This plugin is based on the actual jQuery serialize method, so most of it is not my code. Usage:

$("#myform").serialize({ checkboxesAsBools: true });

The default behaviour with no options passed in (or checkboxesAsBools set to false) is just like the standard jQuery serialize method.

//moar ternaries, moar!
About these ads

15 Comments

Leave a Comment
  1. Mike / Jul 8 2011 20:39

    Thank you very much for this very informative posting … saved me a bundle in time.

  2. Tao / Jan 6 2012 22:53

    Thanks very much for this, very handy!

    I’ve copied it into a “Gist” on GitHub so that anyone can contribute modifications etc – please tell me if you’d rather I remove this and keep the only public version here!

  3. Tao / Jan 7 2012 01:50

    FYI, I modified the “jquery.deserialize” plugin to handle this “checkboxesAsBools” option also: https://github.com/TaoK/jquery.deserialize

  4. Tao / Jan 7 2012 01:53

    (oops, just noticed I never listed the gist address in my original comment! it’s here: https://gist.github.com/1572512 )

  5. Mj / Feb 19 2012 18:27

    Great job my friend. I was looking for this solution. tnx ;)

  6. Deyvid Nascimento / Mar 2 2012 17:23

    it’s great!
    Thank you!

  7. Pascal Buttafuoco / Jun 8 2012 13:37

    I cannot say how much I thank you for this…save me a lot of time.

  8. RBurgundy / Jul 9 2012 14:37

    Very nice piece of code! Just what is was looking for! I’m using it in combination with MVC4 web-api.

  9. Sutisna (@titiskaifa) / Oct 24 2012 10:43

    Thank you. its very help me at this time. :)
    Again… Thanks.

  10. frankindelicato / Nov 6 2012 05:54

    Thank you.

  11. Albert Pak (@albertpak) / Jul 17 2013 17:58

    Thank you :)

  12. Vladimir / Aug 14 2013 17:55

    thanks a lot for this!

  13. Dave Romero / Nov 9 2013 16:22

    You rock. Thanks for this!

  14. Enya / Apr 5 2014 17:09

    Thank you so much Thomas.. I was stuck with this for days..

Trackbacks

  1. ASP.NET MVC4 (Web-Api) checkboxes as boolean | R.Burgundy_'s blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: