JSFiddle - React, Tailwind, and code Playground

HTML

<form id="myForm" action="#" method="post">
Text value:<br /><input type="text" name="TextValue" value="Some value" /><br />
Checkbox:<br /><input type="checkbox" name="MyCheckbox" value="true" /><input type="hidden" name="MyCheckbox" value="false" /><br /><br />
<button type="button">Submit</button>
</form>
<div style="margin-top: 20px;">Serialized values:<br /><span></span></div>

JavaScript

$('button').click(function () {
    // Check checkbox value
    if ($('[name="MyCheckbox"]:checked').length > 0)
        $('[name="MyCheckbox"]:hidden').detach();
    else if ($('[name="MyCheckbox"]:hidden').length < 1)
        $('#myForm').append($('<input type="hidden" name="MyCheckbox" value="false" />'));     

    var data = $('#myForm').serialize();
    $('span').text(data);
});