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 would prefer collate the $_POST

if (!$_POST['checkboxname']) !$_POST['checkboxname'] = 0;

it minds, if the POST doesn't have have the 'checkboxname'value, it was unckecked so, asign a value.

you can create an array of your ckeckbox values and create a function that check if values exist, if doesn`t, it minds that are unchecked and you can asign a value

Answer 2

This can solely be accomplished with some javascript, as unchecked checkboxes don't get transmitted. So you need javascript that e.g. behind the scenes adds hidden fields on unchecking a checkbox. Without javascript this could not be done.

Answer 3

This solution is inspired by @desw's one.

If your input names are in "form style", you will lose array index association with your chekbox values as soon as one chekbox is checked, incrementing this "dissociation" by one unit each time a chekbox is checked. This can be the case of a form for inserting something like employees composed by some fields, for instance:

<input type="text" name="employee[]" />
<input type="hidden" name="isSingle[] value="no" />
<input type="checkbox" name="isSingle[] value="yes" />

In case you insert three employees at once and the first and the second ones are single, you will end up with a 5-element isSingle array, so you won't be able to iterate at once through the three arrays in order to, for instance, insert employees in a database.

You can overcome this with some easy array postprocessing. I'm using PHP at the server side and I did this:

$j = 0;
$areSingles = $_POST['isSingle'];
foreach($areSingles as $isSingle){
  if($isSingle=='yes'){
    unset($areSingles[$j-1]);
  }
  $j++;
}
$areSingles = array_values($areSingles);

Answer 4

@cpburnz got it right but to much code, here is the same idea using less code:

JS:

// jQuery OnLoad
$(function(){
    // Listen to input type checkbox on change event
    $("input[type=checkbox]").change(function(){
        $(this).parent().find('input[type=hidden]').val((this.checked)?1:0);
    });
});

HTML (note the field name using an array name):

<div>
    <input type="checkbox" checked="checked">
    <input type="hidden" name="field_name[34]" value="1"/>
</div>
<div>
    <input type="checkbox">
    <input type="hidden" name="field_name[35]" value="0"/>
</div>
<div>

And for PHP:

<div>
    <input type="checkbox"<?=($boolean)?' checked="checked"':''?>>
    <input type="hidden" name="field_name[<?=$item_id?>]" value="<?=($boolean)?1:0?>"/>
</div>

Answer 5

I would actually do the following.

Have my hidden input field with the same name with the checkbox input

<input type="hidden" name="checkbox_name[]" value="0" />
<input type="checkbox" name="checkbox_name[]" value="1" />

and then when i post I first of all remove the duplicate values picked up in the $_POST array, atfer that display each of the unique values.

  $posted = array_unique($_POST['checkbox_name']);
  foreach($posted as $value){
    print $value;
  }

I got this from a post remove duplicate values from array

Answer 6

So this solution is overkill for this question, but it helped me when I had the same checkbox that occurred many times for different rows in a table. I needed to know the row the checkbox represented and also know the state of the checkbox (checked/unchecked).

What I did was to take the name attribute off of my checkbox inputs, give them all the same class, and create a hidden input that would hold the JSON equivalent of the data.

HTML

 <table id="permissions-table">
    <tr>
	<td>
	    <input type="checkbox" class="has-permission-cb" value="Jim">
	    <input type="checkbox" class="has-permission-cb" value="Bob">
	    <input type="checkbox" class="has-permission-cb" value="Suzy">
	</td>
    </tr>
 </table>
 <input type="hidden" id="has-permissions-values" name="has-permissions-values" value="">

Javascript to run on form submit

var perms = {};
$(".has-permission-checkbox").each(function(){
  var userName = this.value;
  var val = ($(this).prop("checked")) ? 1 : 0
  perms[userName] = {"hasPermission" : val};
});
$("#has-permissions-values").val(JSON.stringify(perms));

The json string will get passed with the form as $_POST["has-permissions-values"]. In PHP, decode the string into an array and you will have an associative array that has each row and the true/false value for each corresponding checkbox. It is then very easy to walk through and compare to current database values.