POST unchecked HTML checkboxes

Viewed 472925

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?

44 Answers

The solution I liked the most so far is to put a hidden input with the same name as the checkbox that might not be checked. I think it works so that if the checkbox isn't checked, the hidden input is still successful and sent to the server but if the checkbox is checked it will override the hidden input before it. This way you don't have to keep track of which values in the posted data were expected to come from checkboxes.

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

I know this question is 3 years old but I found a solution that I think works pretty well.

You can do a check if the $_POST variable is assigned and save it in a variable.

$value = isset($_POST['checkboxname'] ? 'YES' : 'NO';

the isset() function checks if the $_POST variable is assigned. By logic if it is not assigned then the checkbox is not checked.

The easiest solution is a "dummy" checkbox plus hidden input if you are using jquery:

 <input id="id" type="hidden" name="name" value="1/0">
 <input onchange="$('#id').val(this.checked?1:0)" type="checkbox" id="dummy-id" 
 name="dummy-name" value="1/0" checked="checked/blank">

Set the value to the current 1/0 value to start with for BOTH inputs, and checked=checked if 1. The input field (active) will now always be posted as 1 or 0. Also the checkbox can be clicked more than once before submission and still work correctly.

One line solution:

$option1ChkBox = array_key_exists('chkBoxName', $_POST) ? true : false;

Copy this directly

  


$(document).on('change', "input[type=checkbox]", function () {
       
        var checkboxVal = (this.checked) ? 1 : 0;

      
        if (checkboxVal== 1) {
           
            $(this).prop("checked", true);
            $(this).val("true");
        }
        else {
         
            $(this).prop("checked", false);
            $(this).val("false");
        }
    });

For checkbox, a simple way to do this without using hidden type value is:

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

In PHP, for the form data posted do:

// Sanitize form POST data
$post = filter_var_array($_POST, FILTER_SANITIZE_STRING);

// set the default checkbox value
$selfDestruct = '0';
if(isset($post["selfdestruct"]))
    $selfDestruct = $post["selfdestruct"];

A play on a previous answer, to automatically persist unchecked checkboxes with a specific value (in this case, 0) without the side effect of checking all of the checkboxes on submit.

$("form").submit(function () {
    let this_master = $(this);

    // Remove any of the hidden values that may already be there (if the user previously canceled the submit)
    this_master.find("*[id^='hiddenchkinput_']").remove();

    // Get all unchecked checkboxes
    this_master.find('input:checkbox:not(:checked)').each(function () {
      let thisChk = $(this);

      // Create a hidden input with the same name as the checkbox
      let newInput = document.createElement('input');
      $(newInput).attr('name', thisChk.attr('id'))
        .attr('id', 'hiddenchkinput_' + thisChk.attr('id'))
        .attr('type', 'hidden')
        .val('0');
      // Append the new input to the end of the form
      this_master.append(newInput);
    });
})

We can check if the $_POST/Request elements have it or not. Then assign it to a vairable.

$value = (null !== $_POST['checkboxname']) ? 'YES' : 'NO';

This is quite similar to isset() function. But the isset() function can't be used on the result of an expression. We can check its result with null and achieve the same.

The final value is just imaginary. We can change 'YES' to 1 and 'NO'to 0 if the required field is of boolean type.

Related