jQuery form post converts boolean checkboxes to "on" and "off"?

Question

I have a fairly simple form with a checkbox, and I noticed that my checkbox values weren't being picked up on my server side app:

$.post('CreateForm', $('#new-form').serialize(), ...

Everything else posts correctly, but I'm seeing in Firebug that it'll serialize the checkbox value as "on" or "off" instead of "true" and "false" that I get with a normal <form method="post" action="formpage"> ... what's going on here, is this expected behavior? My server side model binder doesn't equate "on" with "true" and thus drops the value. Obviously I could change the model binder, but wanted to make sure I wasn't doing it wrong.

Edit:

Here's my markup:

<input type="checkbox" name="CheckboxValue" >

jQuery version 1.4.4

In Firebug here's the resulting post:

... other variables &CheckboxValue=on

Answer 1

The problem is that your checkboxes do not have value attributes. When jQuery serializes the form, it uses 'on' as the default value.

You should give your checkbox a value:

<input type="checkbox" name="CheckboxValue" value="true" />

See example here: http://jsfiddle.net/U6Sbw/1/

Answer 2

A little late, but just in case someone stumbles across this: if you also want false values to be output, this jQuery plugin provides the option to always ignore the checkbox's "value" and instead serialize it as "true" or "false":

http://tdanemar.wordpress.com/2010/08/24/jquery-serialize-method-and-checkboxes/

Answer 3

Here is what i did which seems to work great. Am using js2form to marshall to sping mvc/jackson controller.

Have a function I run with the following:

$('input[type=checkbox]').unbind('click.checks').bind('click.checks', function(e){
    $(this).val($(this).is(':checked'));
});