how can I override jquery's .serialize to include unchecked checkboxes

Question

I have read quite a few different methods of having html checkboxes get posted to the server, but I am really looking to do it without modifying anything except for $.serial

Answer 1

It's a minor change:

    .map(function( i, elem ){
        var val = jQuery( this ).val();
        if ((jQuery(this).checked != undefined) && (!jQuery(this).checked)) {
            val = "false";
        }

I haven't tested but it seems the most logical approach. Good luck

Answer 2

I did the following, finding the unchecked checkboxes, checking them before calling serializeArray, then unchecking them so the form would be in the same state as the user left it:

var unchecked = chartCfgForm.find(':checkbox:not(:checked)');
unchecked.each(function() {$(this).prop('checked', true)});
var formValues = chartCfgForm.serializeArray();
unchecked.each(function() {$(this).prop('checked', false)});

Answer 3

 var x = $('#formname').serializeArray();
 var serialized = $('#formname').find(':checkbox:not(:checked)').map(function () { 
   x.push({ name: this.name, value: this.checked ? this.value : "false" }); 
 });

try this

Answer 4

I think Robin Maben's solution is missing one step which is to set the boxes to have a property of 'checked'. jQuery's user guide notes on serialise() state that only checked checkboxes are serialised, so we need to add a bit:

$('form').find(':checkbox:not(:checked)').attr('value', '0').prop('checked', true);

The only down-side to this method is a brief flash of your form showing all boxes checked - looks a bit weird.

Answer 5

I like @Robin Maben's approach ( pre-processing the checkboxes before calling the native .serialize() ) but can't make it work without significant modification.

I came up with this plugin, which I have called "mySerialize" (probably needs a better name):

$.fn.mySerialize = function(options) {
    var settings = {
        on: 'on',
        off: 'off'
    };
    if (options) {
        settings = $.extend(settings, options);
    }
    var $container = $(this).eq(0),
        $checkboxes = $container.find("input[type='checkbox']").each(function() {
            $(this).attr('value', this.checked ? settings.on : settings.off).attr('checked', true);
        });
    var s = ($container.serialize());
    $checkboxes.each(function() {
        var $this = $(this);
        $this.attr('checked', $this.val() == settings.on ? true : false);
    });
    return s;
};

Tested in Opera 11.62 and IE9.

As you can see in this DEMO, you can specify the way the checkboxes' ON and OFF states are serialized as an options object passed as a parameter to mySerialize(). By default, the ON state is serialized as 'name=on' and OFF as 'name=off'. All other form elements are serialized as per native jQuery serialize().

Answer 6

Beetroot-Beetroot's answer did not work for me in jQuery 1.9 and later. I used .val() and .prop(), and got rid of the .eq(0) requirement on the container, which restricted serializing to one form in the selector. I had a rare case where I had to serialize multiple forms at the same time, so removing that requirement solved that. Here's my modified solution:

$.fn.mySerialize = function(options) {
    // default values to send when checkbox is on or off
    var settings = {
        on: 'on',
        off: 'off'
    };

    // override settings if given
    if (options) {
        settings = $.extend(settings, options);
    }

    // set all checkboxes to checked with the on/off setting value
    // so they get picked up by serialize()
    var $container = $(this),
        $checkboxes = $container.find("input[type='checkbox']").each(function() {
            $(this).val(this.checked ? settings.on : settings.off).prop('checked', true);
        });

    var serialized = ($container.serialize());

    $checkboxes.each(function() {
        var $this = $(this);
        $this.prop('checked', $this.val() == settings.on);
    });

    return serialized;
};

You can see the corresponding fiddle here.