How Do I Uncheck A Checkbox When Navigating Backwards Or Forwards Between A Web Page?

Question

I have a responsive hamburger menu made with a checkbox that works without any issues. What I'd like to be able to do is uncheck the checkbox when going backward or forward (navigating between pages). I would like it so that when I use the backward or forward button on a web browser the box is unchecked and the menu disappears.

This is the Javascript that I've tried but have not been able to get working properly:

    var perfEntries = performance.getEntriesByType("navigation");
      if (perfEntries[0].type === "back_forward"){
        $('checkbox').removeAttribute('checked');
      } 

If anyone knows of a way to uncheck a checkbox and have it so a hamburger menu doesn't appear when navigating between web pages I'd appreciate you sharing your knowledge. Thank you.

var perfEntries = performance.getEntriesByType("navigation");
if (perfEntries[0].type === "back_forward") {

  $('checkbox').removeAttribute('checked');
}

.body {
  background-color: white;
  font-family: sans-serif;
}

.searchbar {
  float: right;
}

.image {
  text-align: center;
}

.setsumei {
  margin-left: 20px;
  margin-right: 20px;
}

.footer {
  width: 100%;
  height: 40px;
  text-align: center;
  border-top: 1px solid black;
  position: absolute;
  bottom: 0;
  padding: 10px;
}

.page-wrap {
  min-height: 100%;
  margin-bottom: -40px;
}

.page-wrap:after {
  content: "";
  display: block;
}

.site-footer,
.page-wrap:after {
  height: 20px;
}

.site-footer {
  text-align: center;
  border-top: 1px solid black;
  padding: 10px;
}

@media (max-width: 1130px)and (min-width: 280px) {
  .responsive-image-container {
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  img {
    width: 85%;
  }
}

*,
*:before,
*:after {
  padding-left: 0;
  margin: 0;
  box-sizing: border-box;
}

ol,
ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
}

.cp_cont {
  height: auto;
}


/* menu */

.cp_offcm03 {
  position: relative;
  z-index: 5000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  width: 100%;
  height: auto;
  padding-top: 0;
  -webkit-transition: transform 0.3s ease-in;
  transition: transform 0.3s ease-in;
  text-align: center;
  color: black;
  background-color: white;
}

.cp_offcm03 nav,
.cp_offcm03 ul {
  height: 100%;
}

.cp_offcm03 li {
  display: inline-block;
  margin-right: -6px;
}

.cp_offcm03 a {
  display: block;
  padding: 15px 45px;
  margin-bottom: -5px;
  -webkit-transition: background-color .3s ease-in;
  transition: background-color .3s ease-in;
}

.cp_offcm03 a:hover {
  background-color: lightgray;
}


/* menu toggle */

#cp_toggle03 {
  display: none;
}

#cp_toggle03:checked~.cp_offcm03 {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

#cp_toggle03:checked~.cp_container {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.cp_mobilebar {
  display: none;
}


/* content */

.cp_container {
  position: relative;
  top: 0;
  padding: 35px auto;
  -webkit-transition: transform .3s ease-in;
  transition: transform .3s ease-in;
}

.cp_content {
  margin: 0 auto;
  padding: 20px;
  height: 65vh;
  text-align: center;
}

@media (max-width: 1130px)and (min-width: 280px) {
  /* menu */
  .cp_offcm03 {
    position: fixed;
    left: -250px;
    overflow-y: hidden;
    width: 250px;
    height: 100%;
    padding-top: 40px;
    color: black;
    background-color: white;
    z-index: 1000;
  }
  .cp_offcm03 nav {
    background: white;
    border-right: 0.5px solid lightgray;
    margin-left: -210px;
  }
  .cp_offcm03 li {
    display: block;
    margin-right: 0;
  }
  .cp_offcm03 a {
    padding: 20px;
  }
  /* menu toggle */
  .cp_mobilebar {
    display: block;
    z-index: 2000;
    position: relative;
    top: 0;
    left: 0;
    padding: 0 25px;
    width: 100%;
    height: 40px;
    background-color: white;
    border-bottom: .05px solid lightgray;
  }
  .cp_menuicon {
    display: block;
    position: relative;
    width: 25px;
    height: 100%;
    cursor: pointer;
    -webkit-transition: transform .3s ease-in;
    transition: transform .3s ease-in;
  }
  .cp_menuicon>span {
    display: block;
    position: absolute;
    top: 55%;
    margin-top: -0.3em;
    width: 100%;
    height: 0.2em;
    border-radius: 1px;
    background-color: black;
    -webkit-transition: transform .3s ease;
    transition: transform .3s ease;
  }
  .cp_menuicon>span:before,
  .cp_menuicon>span:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 1px;
    background-color: black;
    -webkit-transition: transform .3s ease-in;
    transition: transform .3s ease-in;
  }
  .cp_menuicon>span:before {
    -webkit-transform: translateY(-0.6em);
    transform: translateY(-0.6em);
  }
  .cp_menuicon>span:after {
    -webkit-transform: translateY(0.6em);
    transform: translateY(0.6em);
  }
  #cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #cp_toggle03:checked+.cp_mobilebar span:before,
  #cp_toggle03:checked+.cp_mobilebar span:after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  #cp_toggle03:checked~.cp_offcm03 {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  #cp_toggle03:checked~.cp_container {
    -webkit-transform: translateX(250px);
    transform: translateX(250px);
  }
  input:checked~#h-menu_black {
    display: block;
    opacity: .6;
  }
  #h-menu_black {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .7s ease-in-out;
  }
  /* content */
  .cp_container {
    top: 60px;
    height: 92vh;
    text-align: center;
  }
  .noscroll {
    overflow: hidden;
    position: fixed;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="cp_cont">
  <input id="cp_toggle03" type="checkbox">
  <div class="cp_mobilebar">
    <label for="cp_toggle03" class="cp_menuicon">
    <span></span>
    </label>
  </div>
  <label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
  <div id="body" class="noscroll"></div>

  <header class="cp_offcm03">
    <nav>
      <ul style="text-align: center; margin-left: 210px; overflow: hidden; padding-bottom: 10px; font-size: 15px;">
        <li style="border-bottom: 1px solid lightgray;"><a href="Home.html">ホーム</a></li>
        <li style="border-bottom: 1px solid lightgray;"><a href="Blog.html">ブログ</a></li>
        <li style="border-bottom: 1px solid lightgray;"><a href="About.html">このサイトについて</a></li>
        <li style="border-bottom: 1px solid lightgray;"><a href="Bibliography.html">参考文献</a></li>