title: Checkbox check or uncheck value null
body: <p>I'm trying to set the <code>value</code> of a checkbox, if checked the <code>value</code> is <code>active</code>, but if unchecked the <code>value</code> is <code>disabled</code>.</p>
  <p>The next code works for text, the text changes when the checkbox is checked or unchecked, but the value that is posted to the database is <code>null</code> when the checkbox is unchecked.</p>
  <h2>HTML</h2>
  <pre><code>&lt;input type=&quot;checkbox&quot; name=&quot;cat_status&quot; class=&quot;inline checkbox&quot; id=&quot;checkbox&quot; checked value=&quot;active&quot; onclick=&quot;cat_check()&quot;&gt;
  &lt;label id=&quot;text&quot; style=&quot;display:Active&quot;&gt;Active&lt;/label&gt;
  </code></pre>
  <h2>JS</h2>
  <pre><code>function cat_check() {
  
      var checkBox = document.getElementById('checkbox');
      var text = document.getElementById('text');
  
      if (checkBox.checked == false) {
          text.style.display = &quot;inline&quot;;
          document.getElementById('checkbox').value = &quot;active&quot;;
      } else {
          text.style.display = &quot;none&quot;;
          document.getElementById('checkbox').value = &quot;disable&quot;;
      }
  }
  </code></pre>
  <p>I expect the value posted to database to be <code>disabled</code> when the checkbox is unchecked, but currently getting a <code>null</code>.</p>
  <hr />
  <h1>Update:</h1>
  <p>Added a fixed version including the <code>AJAX</code> call based on the provided feedback of the answers. This is just in case someone fall into the same issue.</p>
  <blockquote>
  <p>If you play with the example on the bottom of <a href="https://api.jquery.com/serialize/" rel="nofollow noreferrer">serialize()</a> documentation you will see that value is not appended for checkboxs that are uncheked. You will have to do it manually. Maybe this can help you: <a href="https://stackoverflow.com/questions/10147149/how-can-i-override-jquerys-serialize-to-include-unchecked-checkboxes">how can I override jquery&#39;s .serialize to include unchecked checkboxes</a></p>
  </blockquote>
  <h2>HTML</h2>
  <pre><code>&lt;form method=&quot;post&quot; class=&quot;add_sub_categories&quot;&gt;
    &lt;input type=&quot;checkbox&quot; name=&quot;cat_status&quot; class=&quot;inline checkbox&quot; id=&quot;checkbox&quot; checked value=&quot;active&quot; onclick=&quot;cat_check()&quot;&gt;
    &lt;label id=&quot;text&quot; style=&quot;display:Active&quot;&gt;Active&lt;/label&gt;
    &lt;a class=&quot;btn btn-xs btn-info save_main_cat&quot;&gt;GO!&lt;/a&gt;
  &lt;/form&gt;
  </code></pre>
  <h2>JS</h2>
  <pre><code>function cat_check() {
  
      var checkBox = document.getElementById('checkbox');
      var text = document.getElementById('text');
  
      if (checkBox.checked == true) {
          text.style.display = &quot;inline&quot;;
      } else {
          text.style.display = &quot;none&quot;;
      }
  }
  </code></pre>
  <h2>AJAX</h2>
  <pre><code>$(document).ready(function() {
  
      $(&quot;.save_main_cat&quot;).click(function() {
  
          var data = $('.add_main_categories').serialize();
  
          /* This code will include the value for the checkbox when unchecked */
          $(&quot;.add_main_categories input:checkbox:not(:checked)&quot;).each(function(e) {
              data += &quot;&amp;&quot;+this.name+'=disable';
          });
  
          $.ajax({
              type: 'POST',
              url: &quot;&lt;?= base_url() ?&gt;admin_ajx/categories_ajx/update_main_categories&quot;,
              data: data,
              success: function() {                                                            
  
                  $('#addCat').modal('hide');
                  $(&quot;.add_main_categories&quot;)[0].reset();
  
                  dttable.destroy();
  
                  $(document).ready(function() {
                      main_cat(), main_cat_option(), dt_tables();
                  });
              }
          });
      });
  });
  </code></pre>