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

User · Answer

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    lt input type  text  name  employee      gt   lt input type  hidden  name  isSingle   value  no    gt   lt input type  checkbox  name  isSingle   value  yes    gt    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

User · Answer

I use this block of jQuery  which will add a hidden input at submit-time to every unchecked checkbox  It will guarantee you always get a value submitted for every checkbox  every time  without cluttering up your markup and risking forgetting to do it on a checkbox you add later  It s also agnostic to whatever backend stack  PHP  Ruby  etc   you re using      Add an event listener on  form s submit action        form   submit      function                 For each unchecked checkbox on the form              this  find    input checkbox not  checked     each                  Create a hidden field with the same name as the checkbox and a value of 0                You could just as easily use  off    false   or whatever you want to get                when the checkbox is empty              function index                    var input       lt input   gt                     input attr  type    hidden                    input attr  name     this  attr  name        Same name as the checkbox                 input attr  value    0       or  off    false    no   whatever                     append it to the form the checkbox is in just as it s being submitted                 var form     this  0  form                    form  append input                       end function inside each                      end each   argument list          return true        Don t abort the form submit             end function inside submit              end submit   argument list

User · Answer

You can also intercept the form submit event and reverse check before submit     form   submit function event          input type checkbox    prop  checked   function index  value           return  value

User · Answer

Copy this directly  x000D   x000D     x000D   x000D   x000D    document  on  change    input type checkbox    function      x000D          x000D          var checkboxVal    this checked    1   0  x000D   x000D         x000D          if  checkboxVal   1    x000D              x000D                this  prop  checked   true   x000D                this  val  true    x000D            x000D          else   x000D            x000D                this  prop  checked   false   x000D                this  val  false    x000D            x000D          x000D   x000D   x000D

User · Answer

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      lt div gt       lt input type  checkbox  checked  checked  gt       lt input type  hidden  name  field name 34   value  1   gt   lt  div gt   lt div gt       lt input type  checkbox  gt       lt input type  hidden  name  field name 35   value  0   gt   lt  div gt   lt div gt    And for PHP     lt div gt       lt input type  checkbox  lt     boolean    checked  checked       gt  gt       lt input type  hidden  name  field name  lt    item id  gt    value   lt     boolean  1 0  gt    gt   lt  div gt

User · Answer

I would actually do the following   Have my hidden input field with the same name with the checkbox input   lt input type  hidden  name  checkbox name    value  0    gt   lt input type  checkbox  name  checkbox name    value  1    gt    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

User · Answer

What I did was a bit different  First I changed the values of all the unchecked checkboxes  To  0   then selected them all  so the value would be submitted    x000D   x000D  function checkboxvalues    x000D        checkbox-container input checkbox   each function    x000D      if   this  prop  checked    true   x000D          this  val  0    x000D          this  prop  checked   true   x000D        x000D        x000D    x000D   x000D   x000D

User · Answer

A common technique around this is to carry a hidden variable along with each checkbox     lt input type  checkbox  name  mycheckbox    gt   lt input type  hidden  name  mycheckbox hidden   gt    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

User · Answer

The problem with checkboxes is that if they are not checked then they are not posted with your form  If you check a checkbox and post a form you will get the value of the checkbox in the   POST variable which you can use to process a form  if it s unchecked no value will be added to the   POST variable   In PHP you would normally get around this problem by doing an isset   check on your checkbox element  If the element you are expecting isn t set in the   POST variable then we know that the checkbox is not checked and the value can be false   if  isset   POST  checkbox1             checkboxValue   false    else         checkboxValue     POST  checkbox1        But if you have created a dynamic form then you won t always know the name attribute of your checkboxes  if you don t know the name of the checkbox then you can t use the isset function to check if this has been sent with the   POST variable

User · Answer

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    lt form gt     lt input type  hidden  value  0  name  selfdestruct  gt     lt input type  checkbox  value  1  name  selfdestruct  gt   lt  form gt    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

User · Answer

function SubmitCheckBox obj         obj value     obj checked    on     off        obj checked   true       return obj form submit        lt input type checkbox name  foo  onChange  return SubmitCheckBox this    gt

User · Answer

Checkboxes usually represent binary data that are stored in database as Yes No  Y N or 1 0 values  HTML checkboxes do have bad nature to send value to server only if checkbox is checked  That means that server script on other site must know in advance what are all possible checkboxes on web page in order to be able to store positive  checked  or negative  unchecked  values  Actually only negative values are problem  when user unchecks previously  pre checked value - how can server know this when nothing is sent if it does not know in advance that this name should be sent   If you have a server side script which dynamically creates UPDATE script there s a problem because you don t know what all checkboxes should be received in order to set Y value for checked and N value for unchecked  not received  ones   Since I store values  Y  and  N  in my database and represent them via checked and unchecked checkboxes on page  I added hidden field for each value  checkbox  with  Y  and  N  values then use checkboxes just for visual representation  and use simple JavaScript function check   to set value of if according to selection    lt input type  hidden  id  N1  name  N1  value  Y    gt   lt input type  checkbox  lt  php if  N1    Y   echo   checked  checked      gt  onclick  check this      gt   lt label for  N1  gt Checkbox  1 lt  label gt    use one JavaScript onclick listener and call function check   for each checkboxe on my web page   function check me      if me checked          me previousSibling previousSibling value  Y         else         me previousSibling previousSibling value  N           This way  Y  or  N  values are always sent to server side script  it knows what are fields that should be updated and there s no need for conversion of checbox  on  value into  Y  or not received checkbox into  N    NOTE  white space or new line is also a sibling so here I need  previousSibling previousSibling value  If there s no space between  then only  previousSibling value    You don t need to explicitly add onclick listener like before  you can use jQuery library to dynamically add click listener with function to change value to all checkboxes in your page      input type checkbox    click function       if this checked            this  prev   val  Y          else           this  prev   val  N

User · Answer

When the checkbox is unchecked on submit  update the checkbox value to  NO  and set checked    TRUE   https   jsfiddle net pommyk 8d9jLrvo 26     document  ready function        function save            if  document getElementById  AgeVerification   checked    false               document getElementById  AgeVerification   value    no         document getElementById  AgeVerification   checked   true                   document getElementById  submit   onclick   save

User · Answer

jQuery version of  vishnu s answer   if     testName   is   checked             testNameHidden   prop  disabled   true       If you are using jQuery 1 5 or below please use the  attr   function instead of  prop

User · Answer

Might look silly  but it works for me  The main drawback is that visually is a radio button  not a checkbox  but it work without any javascript    HTML  Initialy checked  lt span gt  lt  -- set the check attribute for the one that represents the initial value-- gt   lt input type  radio  name  a  value  1  checked gt   lt input type  radio  name  a  value  0  gt   lt  span gt    lt br  gt  Initialy unchecked  lt span gt  lt  -- set the check attribute for the one that represents the initial value-- gt   lt input type  radio  name  b  value  1  gt   lt input type  radio  name  b  value  0  checked gt   lt  span gt    and CSS  span input  position  absolute  opacity  0 99   span input checked  z-index  -10    span input value  0    opacity  0     fiddle here  I d like to hear any problems you find with this code  cause I use it in production

User · Answer

One line solution     option1ChkBox   array key exists  chkBoxName     POST    true   false

User · Answer

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   x000D   x000D    lt table id  permissions-table  gt  x000D       lt tr gt  x000D    lt td gt  x000D        lt input type  checkbox  class  has-permission-cb  value  Jim  gt  x000D        lt input type  checkbox  class  has-permission-cb  value  Bob  gt  x000D        lt input type  checkbox  class  has-permission-cb  value  Suzy  gt  x000D    lt  td gt  x000D       lt  tr gt  x000D    lt  table gt  x000D    lt input type  hidden  id  has-permissions-values  name  has-permissions-values  value    gt  x000D   x000D   x000D    Javascript to run on form submit   x000D   x000D  var perms       x000D      has-permission-checkbox   each function    x000D    var userName   this value  x000D    var val      this  prop  checked      1   0 x000D    perms userName      hasPermission    val   x000D      x000D      has-permissions-values   val JSON stringify perms    x000D   x000D   x000D    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

User · Answer

You can do some Javascript in the form s submit event  That s all you can do though  there s no way to get browsers to do this by themselves  It also means your form will break for users without Javascript  Better is to know on the server which checkboxes there are  so you can deduce that those absent from the posted form values    POST in PHP  are unchecked

User · Answer

If you want to submit an array of checkbox values  including un-checked items  then you could try something like this    lt form gt   lt input type  hidden  value  0  name  your checkbox array    gt  lt input type  checkbox  gt Dog  lt input type  hidden  value  0  name  your checkbox array    gt  lt input type  checkbox  gt Cat  lt  form gt      form   submit function           input type  checkbox   checked   prev   val 1

User · Answer

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

User · Answer

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      lt input type  checkbox  value  1  name  checkbox 1   gt     lt input type  hidden  value  0  name  checkbox 1   gt     For a server backend where the last occurrence is used  PHP Rails  you should do the following      lt input type  hidden  value  0  name  checkbox 1   gt     lt input type  checkbox  value  1  name  checkbox 1   gt      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

User · Answer

Most of the answers here require the use of JavaScript or duplicate input controls  Sometimes this needs to be handled entirely on the server-side   I believe the  intended  key to solving this common problem is the form s submission input control   To interpret and handle unchecked values for checkboxes successfully you need to have knowledge of the following    The names of the checkboxes The name of the form s submission input element   By checking whether the form was submitted  a value is assigned to the submission input element   any unchecked checkbox values can be assumed   For example    x000D   x000D   lt form name  form  method  post  gt  x000D     lt input name  value1  type  checkbox  value  1  gt Checkbox One lt br  gt  x000D     lt input name  value2  type  checkbox  value  1  checked  checked  gt Checkbox Two lt br  gt  x000D     lt input name  value3  type  checkbox  value  1  gt Checkbox Three lt br  gt  x000D     lt input name  submit  type  submit  value  Submit  gt  x000D   lt  form gt  x000D   x000D   x000D    When using PHP  it s fairly trivial to detect which checkboxes were ticked    lt  php   checkboxNames   array  value1    value2    value3        Persisted  previous  checkbox state may be loaded     from storage  such as the user s session or a database   checkboxesThatAreChecked   array         Only process if the form was actually submitted     This provides an opportunity to update the user s     session data  or to persist the new state of the data   if   empty   POST  submit           foreach   checkboxNames as  checkboxName            if   empty   POST  checkboxName                   checkboxesThatAreChecked      checkboxName                         The new state of the checkboxes can be persisted         in session or database by inspecting the values         in  checkboxesThatAreChecked      print r  checkboxesThatAreChecked        gt    Initial data could be loaded on each page load  but should be only modified if the form was submitted  Since the names of the checkboxes are known beforehand  they can be traversed and inspected individually  so that the the absence of their individual values indicates that they are not checked

User · Answer

I prefer to stay with solutions that do not require javascript  and yes  I know there will be some that now categorize me as a luddite  but if you are like me  and you want to be able to display a default   initial setting for a checkbox and then have it hold or update based on the form being submitted  try this  built on a couple of ideas above    Set the variables determining the initial checkbox state and then use server checks to determine the display after each submit of the form   The example below creates an array of arrays  for use in WordPress   works equally well elsewhere  and then determines the checkbox state using server script without using either hidden fields or javascript    lt  php   options array   array       array  list companies shortcode     shortcode list companies     List Companies Shortcode        array  list contacts shortcode     shortcode list contacts     List Contacts Shortcode        array  test checkbox 1     checked     Label for Checkbox 1     checkbox     Some text to instruct the user on this checkbox use         array  test checkbox 2          Label for Checkbox 2     checkbox     Some other text to instruct the user on this checkbox use            name value array   array      name label array   array      field type array   array      field descriptor array   array     foreach    options array as  option entry          name value array   option entry 0       option entry 1         name label array   option entry 0       option entry 2        if   isset   option entry 3                 field type array   option entry 0       option entry 3             field descriptor array   option entry 0       option entry 4          else            field type array  option entry 0       text             field descriptor array   option entry 0      NULL             echo   lt form action    method  POST  gt         foreach    name value array as  setting name   gt   setting value             if   isset    POST   submit                      if   isset    POST   setting name                          setting value     POST   setting name                   else                    setting value                                            setting label    option name label array   setting name              setting field type    field type array   setting name              setting field descriptor    field descriptor array    setting name             echo   lt label for  setting name  gt  setting label lt  label gt             switch    setting field type                 case  checkbox                   echo   lt input type  checkbox  id      setting name     name      setting name     value  checked       setting value      gt       setting field descriptor      lt  input gt  lt br   gt                     break               default                  echo   lt input type  text  id      setting name     name      setting name     value      setting value      gt  lt  input gt  lt br   gt                         echo   lt input type  submit  value  Submit  name  submit   gt     echo   lt  form gt

User · Answer

I ve tried Sam s version first  Good idea  but it causes there to be multiple elements in the form with the same name  If you use any javascript that finds elements based on name  it will now return an array of elements   I ve worked out Shailesh s idea in PHP  it works for me  Here s my code       Delete   hidden  fields if the original is present  use   hidden  value if not     foreach    POST  frmmain   as  field name     value           Only look at elements ending with   hidden      if    substr  field name  -strlen   hidden                break                get the name without   hidden       real name   substr  key  strlen  field name  - strlen   hidden             Create a  fake  original field with the value in   hidden  if an original does not exist     if    array key exists   real name   POST copy                 POST  real name     value                Delete the   hidden  element     unset   POST  field name

User · Answer

There is a better workaround  First of all  provide name attribute to only those checkboxes that are checked  Then on click submit  through a JavaScript function you check all unchecked boxes   So when you submit only those will be retrieved in form collection those who have name property       removing name attribute from all checked checkboxes                   var a      input checkbox checked                         a  each function                               this  removeAttr  name                                          checking all unchecked checkboxes                    var b      input checkbox not  checked                          b  each function                               this  attr  checked   true                            Advantage  No need to create extra hidden boxes and manipulate them

User · Answer

lt input type  checkbox  id  checkbox  name  field name  value  1  gt    You can do the trick at server side  without using hidden fields  Using the ternary operator    isset   POST  field name       entity- gt attribute     POST  field name      entity- gt attribute   0    Using normal IF operator    if  isset   POST  field name            entity- gt attribute     POST  field name      else        entity- gt attribute   0

User · Answer

form   submit function            this  find  input type  checkbox     each  function              var checkbox     this           if  checkbox is   checked                  checkbox attr  value   1              else               checkbox after   append checkbox clone   attr  type  hidden   value 0                 checkbox prop  disabled   true

User · Answer

All answers are great  but if you have multiple checkboxes in a form with the same name and you want to post the status of each checkbox  Then i have solved this problem by placing a hidden field with the checkbox  name related to what i want     lt input type  hidden  class  checkbox handler  name  is admin    value  0    gt   lt input type  checkbox  name  is admin ck    value  1    gt    then control the change status of checkbox by below jquery code     documen  on  change    input type  checkbox     function         var checkbox val     this checked     1   0        this  siblings  input checkbox handler   val checkbox val         now on change of any checkbox  it will change the value of related hidden field  And on server you can look only to hidden fields instead of checkboxes   Hope this will help someone have this type of problem  cheer

User · Answer

input type checkbox    on  change  function        var target     this  parent   find  input type hidden    val        if target    0                target   1            else               target   0              this  parent   find  input type hidden    val target                                   lt p gt       lt input type  checkbox    gt       lt input type  hidden  name  test checkbox    value  0    gt   lt  p gt   lt p gt       lt input type  checkbox    gt       lt input type  hidden  name  test checkbox    value  0    gt   lt  p gt   lt p gt       lt input type  checkbox    gt       lt input type  hidden  name  test checkbox    value  0    gt   lt  p gt    If you leave out the name of the checkbox it doesn t get passed   Only the test checkbox array

User · Answer

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

User · Answer

I solved it by using vanilla JavaScript    lt input type  hidden  name  checkboxName  value  0  gt  lt input type  checkbox  onclick  this previousSibling value 1-this previousSibling value  gt    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

User · Answer

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    gt  1              field2    gt  0

User · Answer

The easiest solution is a  quot dummy quot  checkbox plus hidden input if you are using jquery    lt input id  quot id quot  type  quot hidden quot  name  quot name quot  value  quot 1 0 quot  gt    lt input onchange  quot     id   val this checked 1 0  quot  type  quot checkbox quot  id  quot dummy-id quot    name  quot dummy-name quot  value  quot 1 0 quot  checked  quot checked blank quot  gt   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

User · Answer

I ve got a load of checkboxes that are by default checked  - this is how I solved my problem    if   C1 OR  C2 OR      C18   echo  some are checked     else  C1  set   C2  set   C3  set   C4  set   C5  set   C6  set   C7  set   C8  set   C9  set   C10  set   C11  set   C12  set   C13  set   C14  set   C15  set   C16  set   C17  set   C18  set       if all are unchecked - set them to  check  since its your default  the above line will execute the echo if some are unchecked but the checked ones will still have the value parameter set therefore  to keep them set  when writing them in the form  use if  C1  echo  checked    use the values in the further logic          limitation of this method  you can not uncheck everything - they will all get back checked

User · Answer

You can add hidden elements before submitting form      form   submit function         this  find  input type checkbox    each function  i  el        if  el checked          var hidden el     el  clone          hidden el 0  checked   true        hidden el 0  value    0         hidden el 0  type    hidden        hidden el insertAfter   el

User · Answer

you don t need to create a hidden field for all checkboxes just copy my code  it will change the value of checkbox if not checked the value will assign 0 and if checkbox checked then assign value into 1      form   submit function           var this master     this        this master find  input type  checkbox     each  function              var checkbox this     this             if  checkbox this is   checked      true                 checkbox this attr  value   1              else               checkbox this prop  checked  true                 DONT  ITS JUST CHECK THE CHECKBOX TO SUBMIT FORM DATA                 checkbox this attr  value   0

User · Answer

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

User · Answer

Add a hidden input for the checkbox with a different ID    lt input id  testName  type  checkbox  value  Yes  name  testName  gt   lt input id  testNameHidden  type  hidden  value  No  name  testName  gt    Before submitting the form  disable the hidden input based on the checked condition   if document getElementById  testName   checked        document getElementById  testNameHidden   disabled   true

User · Answer

Example on Ajax actions is   checked   used jQuery instead of  val                 var params                     books     input users   is   checked                    news      input news   is   checked                    magazine      input magazine   is   checked                    params will get value in TRUE OR FALSE

User · Answer

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    lt form gt     lt input type  hidden  value  0  name  selfdestruct  gt     lt input type  checkbox  value  1  name  selfdestruct  gt   lt  form gt

User · Answer

Simple answer  If your code has checked  checked  in it change this to unchecked  unchecked   so your text should look something like this   input type  checkbox  name  yourchosenname  unchecked  unchecked   if it doesn t contain this  you could always add it

[html] POST unchecked HTML checkboxes

Examples related to html

Examples related to forms

Examples related to post

Examples related to checkbox