POST unchecked HTML checkboxes

Question

I've got a load of checkboxes that are checked by default. My users will probably uncheck a few (if any) of the checkboxes and leave the rest checked.

Is there any way to make the form POST the checkboxes that are not checked, rather than the ones that are checked?

Answer 1

I solved it by using vanilla JavaScript:

<input type="hidden" name="checkboxName" value="0"><input type="checkbox" onclick="this.previousSibling.value=1-this.previousSibling.value">

Be careful not to have any spaces or linebreaks between this two input elements!

You can use this.previousSibling.previousSibling to get "upper" elements.

With PHP you can check the named hidden field for 0 (not set) or 1 (set).

Answer 2

My personal favorite is to add a hidden field with the same name that will be used if the check-box is unchecked. But the solution is not as easy as it may seems.

If you add this code:

<form>
  <input type='hidden' value='0' name='selfdestruct'>
  <input type='checkbox' value='1' name='selfdestruct'>
</form>

The browser will not really care about what you do here. The browser will send both parameters to the server, and the server has to decide what to do with them.

PHP for example takes the last value as the one to use (see: Authoritative position of duplicate HTTP GET query keys)

But other systems I worked with (based on Java) do it the way around - they offer you only the first value. .NET instead will give you an array with both elements instead

I'll try to test this with node.js, Python and Perl at sometime.

Answer 3

I also like the solution that you just post an extra input field, using JavaScript seems a little hacky to me.

Depending on what you use for you backend will depend on which input goes first.

For a server backend where the first occurrence is used (JSP) you should do the following.

  <input type="checkbox" value="1" name="checkbox_1"/>
  <input type="hidden" value="0" name="checkbox_1"/>

For a server backend where the last occurrence is used (PHP,Rails) you should do the following.

  <input type="hidden" value="0" name="checkbox_1"/>
  <input type="checkbox" value="1" name="checkbox_1"/>

For a server backend where all occurrences are stored in a list data type ([],array). (Python / Zope)

You can post in which ever order you like, you just need to try to get the value from the input with the checkbox type attribute. So the first index of the list if the checkbox was before the hidden element and the last index if the checkbox was after the hidden element.

For a server backend where all occurrences are concatenated with a comma (ASP.NET / IIS) You will need to (split/explode) the string by using a comma as a delimiter to create a list data type. ([])

Now you can attempt to grab the first index of the list if the checkbox was before the hidden element and grab the last index if the checkbox was after the hidden element.

image source

Answer 4

"I've gone with the server approach. Seems to work fine - thanks. – reach4thelasers Dec 1 '09 at 15:19" I would like to recommend it from the owner. As quoted: javascript solution depends on how the server handler (I didn't check it)

such as

if(!isset($_POST["checkbox"]) or empty($_POST["checkbox"])) $_POST["checkbox"]="something";

Answer 5

A common technique around this is to carry a hidden variable along with each checkbox.

<input type="checkbox" name="mycheckbox" />
<input type="hidden" name="mycheckbox.hidden"/>

On the server side, we first detect list of hidden variables and for each of the hidden variable, we try to see if the corresponding checkbox entry is submitted in the form data or not.

The server side algorithm would probably look like:

for input in form data such that input.name endswith .hidden
  checkboxName = input.name.rstrip('.hidden')
  if chceckbName is not in form, user has unchecked this checkbox

The above doesn't exactly answer the question, but provides an alternate means of achieving similar functionality.

Answer 6

I see this question is old and has so many answers, but I'll give my penny anyway. My vote is for the javascript solution on the form's 'submit' event, as some has pointed out. No doubling the inputs (especially if you have long names and attributes with php code mixed with html), no server side bother (that would require to know all field names and to check them down one by one), just fetch all the unchecked items, assign them a 0 value (or whatever you need to indicate a 'not checked' status) and then change their attribute 'checked' to true

    $('form').submit(function(e){
    var b = $("input:checkbox:not(:checked)");
    $(b).each(function () {
        $(this).val(0); //Set whatever value you need for 'not checked'
        $(this).attr("checked", true);
    });
    return true;
});

this way you will have a $_POST array like this:

Array
(
            [field1] => 1
            [field2] => 0
)