can't send diffrent urls when page refresh

I read a lot of threads here, but I found no solution and I tried a lot of suggestions. So I hope to get help this way. I like to read a checkbox state and send when checked a url with parameter checkbx=1 with pagerefresh and when not checked the parameter checkbx=0. When I execute I can not uncheck the checkbox. It resets immediatly back to checked. But the URL in the address-line says ...checkbx=0!?!

Thanks in advance, Here is my code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="test" id="check"><label for="check">Item</label>

 <script>


$(function () {

$('#check').prop("checked", !!localStorage.getItem("darkMode"));

$('#check').on("click", function() {
  var url;
  if ($(this).is(":checked")) {
    localStorage.setItem('darkMode', 'true');
    $('img').attr('src', '/full_logo_transparent.png');
    $('link#hueman-main-style-css').attr('href', '/darkstyle.min.css');
    console.log('Dark Mode enabled');
    url = 'index1.php?checkbx=1';
  } else {
    localStorage.setItem('darkMode', 'false');
    $('link#hueman-main-style-css').attr('href', '/main.min.css');
    console.log("No Dark Mode");
    url = 'index1.php?checkbx=0';
  }
  window.location.href = url;
});
});
</script>