title: How to trigger an OnClick event with persistent checkboxes through refresh
body: <p>I have a flight sim tracking map with a table that has some checkboxes for displaying flight plan, gps, and route. The checkboxes when click trigger an onclick event that adds or removes layers from the leaflet map to display that data.  The map auto refreshes every 2 minutes and I'm trying to see if I can make any boxes a visitor checks to remain checked through that refresh.</p>
  <p><a href="https://www.sitepoint.com/quick-tip-persist-checkbox-checked-state-after-page-reload/" rel="nofollow noreferrer">I followed this page here</a> on how to get the checkboxes state to persist through a pageload, and that is working great. However it doesn't trigger the onlick event so while the checkbox reloads checked, the path layers aren't turned on.</p>
  <p>this is an example of one of the checkboxes that would turn on the Route Path.  $num is an incrementing number for each row in the table.</p>
  <p><code>&lt;input id=\&quot;RT&quot;.$num.&quot;\&quot; type=\&quot;checkbox\&quot; onClick=\&quot;markerOnCheckBoxRT$num(this)\&quot;/&gt;</code></p>
  <p>Here's the function it triggers when checked on/off:</p>
  <pre><code>function markerOnCheckBoxRT&lt;? echo $num ?&gt;(checkboxElem) {
    if (checkboxElem.checked) {
      polyline&lt;? echo $num ?&gt;a.addTo(map);
      arr&lt;? echo $num ?&gt;.addTo(map);
      dep&lt;? echo $num ?&gt;.addTo(map);
    } else {
      polyline&lt;? echo $num ?&gt;a.removeFrom(map);
      arr&lt;? echo $num ?&gt;.removeFrom(map);
      dep&lt;? echo $num ?&gt;.removeFrom(map);
    }
  }
  </code></pre>
  <p>And here's the script at the bottom of the page:</p>
  <pre><code>&lt;script&gt;
  var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {},
      $checkboxes = $(&quot;#checkbox-container :checkbox&quot;);
  
  $checkboxes.on(&quot;change&quot;, function(){
    $checkboxes.each(function(){
      checkboxValues[this.id] = this.checked;
    });
    
    localStorage.setItem(&quot;checkboxValues&quot;, JSON.stringify(checkboxValues));
  });
  
  // On page load
  $.each(checkboxValues, function(key, value) {
    $(&quot;#&quot; + key).prop('checked', value);
  });
  &lt;/script&gt;
  </code></pre>
  <p>I tried doing</p>
  <pre><code>$(&quot;#&quot; + key).prop('checked', value).click();
  </code></pre>
  <p>while this does trigger the onclick to show the path, it also checks and triggers every checkbox on the page, not just this single one.  I tried .change() but that broke it where checks didn't persist.</p>
  <p>Any suggestions would be greatly appreciated. thanks!</p>
  <hr />
  <p>EDIT: 11/21/20:</p>
  <p>Some additional info after trying the first suggestion:</p>
  <p>Here's how the checkboxes look at first load and I check two of them.</p>
  <p><a href="https://i.stack.imgur.com/oqfAF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oqfAF.png" alt="https://i.postimg.cc/7LR8vdvR/Screen-Shot-2020-11-21-at-11-42-35-AM.png" /></a></p>
  <p>After trying the suggested code and refreshing the page, only the first checkbox &quot;RT&quot; is checked, and it does trigger the OnClick to run and show the path.</p>
  <p><a href="https://i.stack.imgur.com/WRLUv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WRLUv.png" alt="enter image description here" /></a></p>
  <p>when I write the key and value to console, here's what it shows.
  <a href="https://i.stack.imgur.com/egENI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/egENI.png" alt="enter image description here" /></a></p>
  <p>So no matter what boxes checked, once it hits the first checkbox with a &quot;true&quot;, it works but then everything after comes up false.</p>