jquery - check/uncheck customized checkbox with hidden input

I have this in HTML

<div class="my-checkbox">
    <label>I do agree</label>
    <input type="hidden" name="agreement" value="0">
</div>

and this in jQuery

$('.my-checkbox').on('click', function()
{
    if($(this).children('[type="hidden"]').val() == 0)
    {
        $(this).children('[type="hidden"]').val(0);
        $(this).removeClass('active');
    }
    else
    {
        $(this).children('[type="hidden"]').val(1);
        $(this).addClass('active');
    }
});

When I click .my-checkbox, it will change the value to 1 and add class active and when I click it again vice-versa. It works correctly but in mobile device when I click it it changes the value and set to active but when I click it again, it changes the value but the active class doesn't remove. How do I know that? just by double clicking and submit the form and the result was => you should agree with agreements.

Thanks