HTML Input Checkbox return 'On' instead of 'True' when submitting form

I have a MVC3 app using Project Awesome (http://awesome.codeplex.com/), but I am getting a weird behaviour on checkboxes. I have the following simple Html within a Modal popup <input type="checkbox" class开发者_Go百科="check-box" name="IsDeleted">

When I submit the form containing this element, its post value is 'on' instead of the expected 'true' (when element is checked).

Does anybody know why this is? I am assuming there may be some javascript somewhere messing with the form data, but wanted to check whether there isn't some HTML I am missing.

Thanks

Set the checkboxes value attribute to true and you will get true in your post value.

It's browser specific, I suppose, what to send when value is undefined. You need to defined value attribute on your radios/checkboxes to be sure what will be passed back to you. I would suggest value="1"

set data-val="true" and value="true" by deafult... if checkbox is checked then returns true

Check Checkbox is checked or not if checked set Hidden field true else set hidden field false.

$('#hiddenFieldId').val($('#CheckBoxId').attr('checked')=='checked')

Surely you should just check if it is set - the value that it sends across is irrelevant, if it's not checked, then nothing at all gets sent when you POST.

Nothing worked! I ended up on a hacky way after seeing the serialised form object just before posting to controller/action. Its not safe in case if anyone would have any textboxes inside that may contain ampersands. In my case, i had an array of checkboxes, so I did this hack after I am very sure, i won't have problems.

var formData = $("#form").serialize();
formData = formData.replaceAll('=on&','=true&');
if (formData.endsWith('=on'))
{
 formData = formData.substring(0, formData.length - 3) + "=true";
}

Hope it helps to those 'someone' with my scenario. Happy hacking.

Use jQuery for cross-browser decision. And it will return true or false anyway.

$('#check-box-id').attr('checked' ) == true

if your checkbox has an id check-box-id. For your current version use the next (select by class name):

$('.check-box').attr('checked' ) == true

Use jQuery

var out=$('.check-box').is('checked')

If checkbox is checked out=true else out=false

In HTML, add a input type="hidden" above checkbox:

<input name="active" id="activeVal" type="hidden">
<input id="active" type="checkbox">

Then, add a script as below:

$('#activeVal').val($('#active').is(':checked'));
$('#active').change(function() {
     $('#activeVal').val($('#active').is(':checked'));
});

When you do eg. $('#your-form').serialize() in jQuery, you will get value of checkbox when checked active: true or uncheck active: false