title: Use jQuery to update URL with value from checkboxes and keep checked after refresh
body: <p>I have found a very nice jQuery script that helps me to get values from checkboxes sent to the URL as an array. This works perfectly, but I need the page to refresh after each selection, but by doing this, the checkboxes uncheck in Google Chrome (works fine in FF). The URL keeps fine, but the checkboxes all uncheck.</p>
  
  <p>Is there any way in jQuery to keep the checked checkboxes checked after a refresh? Normally for me, when wanting a checkbox to be checked after a post or refresh, I can use an if-statement within the checkbox that i.e. says if($_GET[selected] == $value){ echo "checked"; }</p>
  
  <p>You can test the code here: <a href="http://mazey.dk/bato/temp.php" rel="nofollow">http://mazey.dk/bato/temp.php</a></p>
  
  <p>The code looks like this: </p>
  
  <pre><code>&lt;?
  $actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[PHP_SELF]";
  ?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;title&gt;Konfigurator&lt;/title&gt;
  &lt;link rel="stylesheet" href="main.css" /&gt;
  &lt;style type="text/css"&gt;
  body,td,th {
      font-family: Tahoma, "Titillium Web", sans-serif;
  }
  &lt;/style&gt;
  &lt;script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
       &lt;div class="flowers"&gt;
       &lt;?
      $hent_access  = mysql_query("SELECT * FROM bato_produkter WHERE typen = 2");
      while($hent_access_data = mysql_fetch_array($hent_access)){
      $erstat2 = str_replace('BATO','bata',$hent_access_data[navn]);
      ?&gt;
      &lt;div class="flowers"&gt;
  
      &lt;label&gt;
      &lt;table width="100%" border="0" cellspacing="0" cellpadding="0" &gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;img src="images/&lt;?=$hent_access_data[vnr]?&gt;.jpg" width="150" class="apply_image" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="product_list_header"&gt;&lt;?=$erstat2?&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td  class="product_list_header"&gt;kr. &lt;?=$hent_access_data[pris]?&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td  class="product_list_header"&gt;&lt;input type="checkbox" name="selected[]" value="&lt;?=$hent_access_data[vnr]?&gt;" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/label&gt;
      &lt;/div&gt;
      &lt;?
      }
      ?&gt;
      &lt;/div&gt;
  
  &lt;script&gt;
  $('input[type="checkbox"]').on('change', function(e){
  var data = [],
  loc = $('&lt;a&gt;', {href:window.location})[0];
  $('input[type="checkbox"]').each(function(i){
  if(this.checked){
  data.push(this.name+'='+this.value);
  }
  });
  data = data.join('&amp;');
  $.post('&lt;?=$actual_link?&gt;', data);
  if(history.pushState){
  history.pushState(null, null, loc.pathname+'?cart=&lt;?=$_GET[cart]?&gt;&amp;'+data);
  location.reload();
  }
  
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>---- EDIT ----</p>
  
  <p>After reading the comments and researching for a while, I am now trying to do it all through jQuery and AJAX calls, as I can read would be the most correct to do (and I get to learn something entirely new). So this is what I've got so far:</p>
  
  <pre><code>&lt;form action="" method="post"&gt;
  
       &lt;?
      $hent_access  = mysql_query("SELECT * FROM bato_produkter WHERE typen = 2");
      while($hent_access_data = mysql_fetch_array($hent_access)){
          $erstat2 = str_replace('BATO','bata',$hent_access_data[navn]);
      ?&gt;
  
      &lt;label&gt;
      &lt;table width="100%" border="0" cellspacing="0" cellpadding="0" &gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;img src="images/&lt;?=$hent_access_data[vnr]?&gt;.jpg" width="150" class="apply_image" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="product_list_header"&gt;&lt;?=$erstat2?&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td  class="product_list_header"&gt;kr. &lt;?=$hent_access_data[pris]?&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td  class="product_list_header"&gt;&lt;input type="checkbox" name="selected[]" value="&lt;?=$hent_access_data[vnr]?&gt;" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/label&gt;
      &lt;?
      }
      ?&gt;
     &lt;/form&gt;
  
  &lt;script&gt;
  var data = $("form").serialize(); 
  var checked = []
  
  $("input[name='selected[]']:checked").each(function ()
  { 
  $.ajax({
          url: "hello.php", 
          type: "POST",
          async: true,
          cache: false,
          data: data, 
          success: function(data){ 
              alert(data) 
          }
      }); 
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The hello.php file looks like this:</p>
  
  <pre><code>&lt;?php
  include('../settings.inc.php');
  
      foreach ($_POST[selected] as $value) {
      $list_valg = mysql_query("SELECT * FROM bato_produkter WHERE vnr = '$value'");
      $list_valg_data = mysql_fetch_array($list_valg);
      $pris += $list_valg_data[pris]; 
      $space_used += $list_valg_data[funktion];
      }
  
  echo $pris." - Space used ".$space_used."&lt;br/&gt;Total Space available ".$vogn_space;
  
  ?&gt;
  </code></pre>
  
  <p>Now I've gotten the alert to show me the result, but only when I refresh the page manually (CTRL+R), and furthermore it loads an alert-box for every checkbox checked.</p>
  
  <p>What I am trying to accomplish right now, is for the alert box to show the results from hello.php when checking a checkbox, but only once with all the checkboxes accumulated. </p>
  
  <p>----- EDIT -----</p>
  
  <p>Everything now works like I wanted it to, so that's absolutely perfect!
  As an extension I have one more thing:
  If you look at the site - <a href="http://mazey.dk/bato/temp.php" rel="nofollow">http://mazey.dk/bato/temp.php</a></p>
  
  <p>When you have picked the first item with the radio button the checkboxes show. When you check a checkbox you can see in the upper left hand corner the status of the selection and also the space availible. For the products with the checkboxes they all require a certain amount of space. Visually it is displayed in the last part of the text (1/3, 2/3 or 1/1) but it is also stored in a table row for every product (stored as integers; 1,2,3). </p>
  
  <p>Can you lead me on the way in how to accomplish the products + checkboxes to be hidden if the products space exceeds the space available?</p>
  
  <p>Thanks a bunch!</p>