title: keep radio button values and set default checked
body: <p>I have a form with a radio button group. I want to set 'checked' as default the second radio button, and also keep the value after submitting form if user clicks on the first one.</p>
  
  <p>Note that I'm using the <code>&lt;span class="custom-radiobutton"&gt;&lt;/span&gt;</code> for style the radiobuttons, with a lower <code>z-index</code> than the real <code>&lt;input type="radio"</code>, which has <code>opacity:0</code>.</p>
  
  <p><strong>This is a snippet of my code:</strong></p>
  
  <pre><code>&lt;div class="group-wrapper"&gt;
    &lt;div class="radiobutton-wrapper boolean"&gt;
      &lt;span class="custom-radiobutton"&gt;&lt;/span&gt;
      &lt;input type="radio" id="hosting-1" name="hosting[]" value="1" class="w100" &lt;?php if ((isset($_POST['hosting'])) &amp;&amp; ((isset($_POST['hosting'])) == 1)) {echo 'checked="checked"';}; ?&gt; /&gt; 
      &lt;label for="hosting-1"&gt;Sí&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="radiobutton-wrapper boolean"&gt;
      &lt;span class="custom-radiobutton"&gt;&lt;/span&gt;
      &lt;input type="radio" id="hosting-2" name="hosting[]" value="0" class="w100" &lt;?php if ((!isset($_POST['hosting'])) || ((isset($_POST['hosting'])) == 0)) {echo 'checked="checked"';}; ?&gt; /&gt; 
      &lt;label for="hosting-2"&gt;No&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Additional info:</strong></p>
  
  <ul>
  <li>I'm using HTML5.</li>
  <li>I'm validating the form with PHP (I want to keep this, even if I know maybe is better jQuery+PHP validation).</li>
  <li>I have noticed that I need two clicks to select the first radio button. This only occurs from original state. After this, It works with one click, as expected.</li>
  </ul>
  
  <p>I'm expending a lot of hours trying to figure out what's wrong, so any help will be very appreciated.
  Cheers,</p>