Force a checkbox to always submit, even when unche

问题:

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 way to do it (jquery to check if the box is checked or not, then set the value to 0/1 and check it off so it will submit)

回答1:

This goes totally against the natural/specified behaviour of checkboxes in HTML. If checked, then its value will be sent as parameter. If unchecked, then its value will not be sent as parameter. How else would you in the server side be able to distinguish checked from unchecked checkboxes? Note that when the value is unspecified, then most browsers default to "on". It's easier if you give all checkboxes the same name but a different and fixed value. This way you can obtain the checked ones as an array/collection.

If all checkboxes are already known beforehand in server side, you can just apply basic math to obtain the unchecked checkboxes:

uncheckedCheckboxes = allCheckboxes - checkedCheckboxes

That's also the normal practice. If you tell a bit more about the server side language you're using to process the form, we would be able to give more tips/tricks how to achieve this the best way.

If those checkboxes are created dynamically at the client side, then add for each checkbox a <input type="hidden"> field containing information about the checkbox, so that the server side knows which checkboxes are all present as the moment of submission.

回答2:

Thanks to @Lazarus' idea, also mentioned by @BalusC, you can add an additional control to the form:

<input type="hidden" name="checkbox1" value="off">
<input type="checkbox" name="checkbox1" value="on"> My checkbox

Checkbox and the hidden fields must have the same name. The hidden input is always submitted as a default value. If the checkbox is checked then also it's submitted. So you have a list of 2 values for parameter "checkbox1", that you have to treat at server side.

...maybe a <select> tag would be more handy.

回答3:

There is a legitimate reason for asking for something like this, although the behaviour envisioned here is not the right way to go about it. There is a problem with the checkbox when used correctly when editing existing data and that's that there is no way to determine whether no value was submitted because the field was not present on the form or because the user cleared all of the values. You can run into this sort of problem any time you include fields conditionally.

One could go to the trouble of maintaining a "view state", of course, but it's much easier to include a hidden "companion field" whenever a checkbox or select with the multiple option (which is also excluded when all selections are cleared) is displayed. The field should have a related but different name (a name from which the actual field name can be extracted). The Lotus Domino server has used fields named %%Surrogate_FieldNameHere for this purpose since (I believe) version 7 for exactly the reason I described here.

回答4:

To tell you the truth, this feels like a big no-no.

Anyway here goes:

<script type="text/javascript">
$(document).ready(function () {
    $('form').submit(function() {
        $(this).find('input[type=checkbox]').each(function () {
            $(this).attr('value', $(this).is(':checked') ? '1' : '0');
            $(this).attr('checked', true);
        });
    });
});
</script>

回答5:

Although this goes against the HTML spec, if you know what you are doing, using this you no longer have to cater checkboxes which are handled completely differently when submitted - and for example naming fields with_brackets[] can actually be useable.

Complete solution

$(document).on('submit', 'form', function() {
    $(this).find('input[type=checkbox]').each(function() {
        var checkbox = $(this);

        // add a hidden field with the same name before the checkbox with value = 0
        if ( !checkbox.prop('checked') ) {
            checkbox.clone()
                .prop('type', 'hidden')
                .val(0)
                .insertBefore(checkbox);
        }
    });
});

Take note: the non-checked checkboxes now submit a value of "0"

---

Additionally, if you want to change the behaviour of a single form only, just alter the first line in the above snippet:

$(document).on('submit', 'form.your-class-name', function() {
    // ...
});

回答6:

if you have many checkbox, you can try this code:

<input type="checkbox" onclick="$(this).next().val(this.checked?1:0)"/> <input type="hidden" name="checkbox1[]"/>

回答7:

If you have the following HTML:

<form id="myform" method="post" action="my/url">
    <input type="checkbox" id="checkbox1" name="checkbox1"/>
    <input type="checkbox" id="checkbox2" name="checkbox2"/>
    <input type="checkbox" id="checkbox3" name="checkbox3"/>
</form>

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');