how can I override jquery's .serialize to include unchecked checkboxes
just attach the data. In my save routine it's enough to submit unchecked as empty string and checked as "on":
var formData = $('form').serialize();
// include unchecked checkboxes. use filter to only include unchecked boxes.
$.each($('form input[type=checkbox]')
.filter(function(idx){
return $(this).prop('checked') === false
}),
function(idx, el){
// attach matched element names to the formData with a chosen value.
var emptyVal = "";
formData += '&' + $(el).attr('name') + '=' + emptyVal;
}
);
This will override the jquery.serialize() method to send both checked/unchecked values, rather than only checked values. It uses true/false, but you can change the "this.checked" to "this.checked ? 'on' : 0" if you prefer.
var originalSerializeArray = $.fn.serializeArray;
$.fn.extend({
serializeArray: function () {
var brokenSerialization = originalSerializeArray.apply(this);
var checkboxValues = $(this).find('input[type=checkbox]').map(function () {
return { 'name': this.name, 'value': this.checked };
}).get();
var checkboxKeys = $.map(checkboxValues, function (element) { return element.name; });
var withoutCheckboxes = $.grep(brokenSerialization, function (element) {
return $.inArray(element.name, checkboxKeys) == -1;
});
return $.merge(withoutCheckboxes, checkboxValues);
}
});
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.