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!