title: Refresh page after selecting radio button but keep the radio button value
body: <p>I'm creating a page where the user can select an option by clicking on a radio button. I want the page to refresh keeping the selected radio button value. These are my codes.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div style="float:right"&gt;
      &lt;label&gt;&lt;input type="radio" name="colorRadio" value="f1"&gt;Option 1&lt;/label&gt;&lt;br&gt;
      &lt;label&gt;&lt;input type="radio" name="colorRadio" value="f2"&gt;Option 2&lt;/label&gt;&lt;br&gt;
      &lt;label&gt;&lt;input type="radio" name="colorRadio" value="f3"&gt;Option 3&lt;/label&gt;&lt;br&gt;
  &lt;/div&gt;
  
  &lt;div style="float:left;" class="f1 box"&gt;This is option 1&lt;/div&gt;
  &lt;div style="float:left;" class="f2 box"&gt;This is option 2&lt;/div&gt;
  &lt;div style="float:left;" class="f3 box"&gt;This is option 3&lt;/div&gt;
  </code></pre>
  
  <p>JAVASCRIPT</p>
  
  <pre><code> $('input[type="radio"]').click(function(){
          if($(this).attr("value")=="f1"){
              $(".box").hide();
              $(".f1").show();
          }
  
          if($(this).attr("value")=="f2"){
              $(".box").hide();
              $(".f2").show();
          }
          if($(this).attr("value")=="f3"){
              $(".box").hide();
              $(".f3").show();
          }
  
      });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code> .box{
      padding: 20px;
      display: none;
      margin-top: 20px;
      border: 1px solid #000;
  }
  </code></pre>
  
  <p>Is there a a way to reload just the div instead of refreshing the entire page? </p>