title: Trigger click on radio button with remembering selection on page refresh
body: <p>This question is not duplicated.</p>
  
  <p>I have two radio buttons (radio1, radio2).</p>
  
  <p>I was able to achieve the following, BUT separately:</p>
  
  <ol>
  <li>Trigger a click on "radio1" on page load. So whenever the page is loaded, the button is clicked.</li>
  <li>Remember the selected radio button that is manually clicked by user, using local storage described in <a href="https://stackoverflow.com/questions/7198408/remember-radio-button-selections">this answer</a> by Joseph Silber. So if the user manually clicked on "radio2" and then refreshed the page, it remembers that selection.</li>
  </ol>
  
  <p>The problem is that I cannot use both methods at the same time. Because the triggered click always takes over the local storage, which makes the selected radio button not remembered when page is refreshed.</p>
  
  <p>I need "radio1" to be clicked (not checked) on page load by default, but when the user manually clicks on "radio2" it remembers that selection, and whenever the page is refreshed the "radio2" will be clicked with respect to the user's selection.</p>
  
  <p>I tried a lot to make a combination of codes I have to get them both works together, but I couldn't figure it out.</p>
  
  <p><strong>The code for trigger a click on radio button on page load:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
    $("#radio1 input:radio").click(function() {
      alert("clicked");
     });
    $("input:radio:first").prop("checked", true).trigger("click");
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>The code for local storage; remembering radio selection:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function()
  {
      $('input[type=radio]').each(function()
      {
          var state = JSON.parse( localStorage.getItem('radio_'  + this.id) );
  
          if (state) this.checked = state.checked;
      });
  });
  
  $(window).bind('unload', function()
  {
      $('input[type=radio]').each(function()
      {
          localStorage.setItem(
              'radio_' + this.id, JSON.stringify({checked: this.checked})
          );
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Again, they both works fine but separately, either one of them will work.</p>
  
  <p>If anyone can help me to make both methods work together, I will really appreciate it.</p>