How can I get a checkbox value (ticked or unticked) into jquery / ajax variable?

Question

I am using ajax to save a checkbox to my database without reloading the page. I therefore need to know the value of the checkbox (whether it is ticked or unticked) when the ajax call is made. I have tried the following lines of code from SO to get the tickbox value and none of them seem to work for me:

tb_checkbox_id = jQuery('#tb-checkbox-id').val();  //always returns on
// tb_checkbox_id = jQuery('#tb-checkbox-id').prop('checked');  always returns false
//  tb_checkbox_id = jQuery('#tb-checkbox-id').is(':checked');  always returns false

The correct id is being selected as I can change the value in the html and it changes the output with the above code (eg set to false then will output false).

Here is the rest of my code. There is also another checkbox on the page but that has a different ID.

Why does it always return the same value for ticked or unticked? I can't figure it out.

function tb_checkbox ($db_table_name, $db_userid_column_name, $db_checkbox_column_name, $where_user_id, $checkbox_default)
{
/*------Echo checkbox form------*/
    echo '<form action="" method="post" id="checkbox_form">';
    echo '<input type="checkbox" class="tb-checkbox" id="tb-checkbox-id" name="tb_checkbox_practitioner_pages"'; 
    if ($checkbox_db_value == 1) //Display the checkbox as "checked" or not by reading checkbox_db_value which is the value from database. Is set to default value if no database value exists.
        { 
            echo ' checked';
        }
        echo '> <input type="submit"> </form>';
        echo "<p>Value at POST is: ";
        echo $_POST['tb_checkbox_practitioner_pages'];
    $user_id = bbp_get_current_user_id();
    ?>
    <script>
//  tb_checkbox_id = jQuery('#tb-checkbox-id').val();
//  tb_checkbox_id = jQuery('#tb-checkbox-id').prop('checked');
  tb_checkbox_id = jQuery('#tb-checkbox-id').is(':checked');
    js_user_id = '<?php echo $user_id;?>';
    jQuery('#checkbox_form').on('submit', function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "/wp-content/themes/buddyboss-theme-child/tb-checkbox-js-called.php",
            data: {userid: js_user_id},
            success: function() {
            alert("Success checkbox = " + tb_checkbox_id)          //('Post is' + $_POST['tb_checkbox_practitioner_pages']);
            }
        });
    });
    </script>
    <?php
}

Answer 1

Good question.

I would store a Boolean value of true or false (1 or 0 respectively).

You would check this way

tb_checkbox_id = document.getElementById("#tb-checkbox-id").checked;

This would store a true or false (either it's checked or not checked). I would then store this in the database.