Checkbox check or uncheck value null

Question

I'm trying to set the value of a checkbox, if checked the value is active , but if unchecked the value is disabled .

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 null when the checkbox is unchecked.

HTML

<input type="checkbox" name="cat_status" class="inline checkbox" id="checkbox" checked value="active" onclick="cat_check()">
<label id="text" style="display:Active">Active</label>

JS

function cat_check() {

    var checkBox = document.getElementById('checkbox');
    var text = document.getElementById('text');

    if (checkBox.checked == false) {
        text.style.display = "inline";
        document.getElementById('checkbox').value = "active";
    } else {
        text.style.display = "none";
        document.getElementById('checkbox').value = "disable";
    }
}

I expect the value posted to database to be disabled when the checkbox is unchecked, but currently getting a null .

---

Update:

Added a fixed version including the AJAX call based on the provided feedback of the answers. This is just in case someone fall into the same issue.

If you play with the example on the bottom of serialize() 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: how can I override jquery's .serialize to include unchecked checkboxes

HTML

<form method="post" class="add_sub_categories">
  <input type="checkbox" name="cat_status" class="inline checkbox" id="checkbox" checked value="active" onclick="cat_check()">
  <label id="text" style="display:Active">Active</label>
  <a class="btn btn-xs btn-info save_main_cat">GO!</a>
</form>

JS

function cat_check() {

    var checkBox = document.getElementById('checkbox');
    var text = document.getElementById('text');

    if (checkBox.checked == true) {
        text.style.display = "inline";
    } else {
        text.style.display = "none";
    }
}

AJAX

$(document).ready(function() {

    $(".save_main_cat").click(function() {

        var data = $('.add_main_categories').serialize();

        /* This code will include the value for the checkbox when unchecked */
        $(".add_main_categories input:checkbox:not(:checked)").each(function(e) {
            data += "&"+this.name+'=disable';
        });

        $.ajax({
            type: 'POST',
            url: "<?= base_url() ?>admin_ajx/categories_ajx/update_main_categories",
            data: data,
            success: function() {                                                            

                $('#addCat').modal('hide');
                $(".add_main_categories")[0].reset();

                dttable.destroy();

                $(document).ready(function() {
                    main_cat(), main_cat_option(), dt_tables();
                });
            }
        });
    });
});

Answer 1

If I understood correctly, the problem is on your click handler. When you unchek the checkbox by clicking on it, the checked property will be false when you observe it inside the click handler. And you are doing this:

 if (checkBox.checked == false)
 {
     text.style.display = "inline";
     document.getElementById('checkbox').value = "active";
 }

So, in other words, you are setting the value to active when the checkbox is unchecked , but instead, that setting should be associated to checked state equal to true . I believe you are looking for something like this:

 function cat_check() { var checkBox = document.getElementById('checkbox'); var text = document.getElementById('text'); if (checkBox.checked === true) { text.style.display = "inline"; checkBox.value = "active"; } else { text.style.display = "none"; checkBox.value = "disable"; } console.log(checkBox.value); } 

 .as-console {background-color:black !important; color:lime;} 

 <input type="checkbox" name="cat_status" class="inline checkbox" id="checkbox" checked value="active" onclick="cat_check()"> <label id="text" style="display:inline">Active</label> 

There are other fixs on the code also:

A) The initial display:Active is not a valid CSS configuration in reference to <label id="text" style="display:Active">Active</label> . So I changed it to display:inline .

B) Use the already defined variable checkBox inside the click handler instead of doing multiple calls to document.getElementById('checkbox') .

Answer 2

You can set value 1 , as if it is checked then value posts 1 otherwise can checked null or not;

// In view

//On post time you can check if value is 1 then cheked otherwise null