Force a checkbox to always submit, even when unchecked

Question

I have an html form and i would like ALWAYS to have checkboxes to submit a value. How can i do that? I have one idea but i havent tried it and i am unsure if its the best wa

Answer 1

If you have the following HTML:

Normal form submit:

On form submit, before submitting, change all values of checkboxes to 0 and 1 based on if checkbox is unchecked or checked. Like so:

$('#myform').submit(function() {
    var $checkboxes = $('#myform').find('input[type="checkbox"]');// Select all checkboxes
    $checkboxes.filter(':checked').val(1);// Set value to 1 for checked checkboxes
    $checkboxes.not(':checked').val(0);// Set value to 0 for unchecked checkboxes
    $checkboxes.prop('checked', true);// Change all checkboxes to "checked" so all of them are submitted to server
});

Note: Ugly thing about this code, while form is submitting, all checkboxes will appear as "checked" for a moment. But if you apply same concept for ajax form submit, it would be better.

AJAX form submit:

$.post('my/url', {
    'checkbox1': $('#checkbox1').is(':checked') ? 1 : 0,
    'checkbox2': $('#checkbox2').is(':checked') ? 1 : 0,
    'checkbox3': $('#checkbox3').is(':checked') ? 1 : 0
}, function(response) {
    // Server JSON response..
}, 'json');