title: If A Radio Button is Checked Call Function Handler
body: <p><a href="http://liveweave.com/rFqNTl" rel="nofollow">http://liveweave.com/rFqNTl</a>  </p>
  
  <h2>Fixed by using the property selector, and triggering change on the element - <a href="http://liveweave.com/ZTirGp" rel="nofollow">http://liveweave.com/ZTirGp</a></h2>
  
  <p>I have a few radio buttons that act as a menu. When design is checked a designer div is shown, when code is checked, a textarea is shown. </p>
  
  <p>One problem I ran into is when I click New I want the on function declared for #designer so that when it's checked to show that div, and hide the others.</p>
  
  <p>I've added the code below along with a demo to show what I'm having trouble with.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id='header'&gt;
      &lt;center&gt;
          &lt;div class="menubtn" id='newdoc'&gt;
              &lt;input name="opt" id="opt-1" checked="checked" type="radio"&gt;
              &lt;label for="opt-1"&gt;New&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="menubtn" style='display:none;' id='openload'&gt;
              &lt;input name="opt" id="opt-2" type="radio"&gt;
              &lt;label for="opt-2"&gt;Browse&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="menubtn" onclick='saveTextAsFile()'&gt;
              &lt;input name="opt" id="opt-3" type="radio"&gt;
              &lt;label for="opt-3"&gt;Save&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="menubtn" id='dropbox'&gt;
              &lt;input name="opt" id="opt-4" type="radio"&gt;
              &lt;label for="opt-4"&gt;Dropbox&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="menubtn" id='designer'&gt;
              &lt;input name="opt" id="opt-5" type="radio"&gt;
              &lt;label for="opt-5"&gt;Design&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="menubtn" id='settings'&gt;
              &lt;input name="opt" id="opt-6" type="radio"&gt;
              &lt;label for="opt-6"&gt;Settings&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="menubtn" id='codecanvasdisplay'&gt;
              &lt;input name="opt" id="opt-7" type="radio"&gt;
              &lt;label for="opt-7"&gt;Code&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="menubtn" id='fullcode'&gt;
              &lt;input name="opt" id="opt-8" type="radio"&gt;
              &lt;label for="opt-8"&gt;Full Code&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="menubtn" style='display:none;' id='intcolorpick'&gt;
              &lt;input name="opt" id="opt-9" type="radio"&gt;
              &lt;label for="opt-9"&gt;Color Picker&lt;/label&gt;
          &lt;/div&gt;
      &lt;/center&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#header {
      color: #2234cb;
      text-shadow: 0px 0px 2em #fff;
      background:#e0e2f9; /* Old browsers */
      background:-moz-linear-gradient(top,  #e0e2f9 0%, #d7dbf8 100%); /* FF3.6+ */
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e2f9), color-stop(100%,#d7dbf8)); /* Chrome,Safari4+ */
      background:-webkit-linear-gradient(top,  #e0e2f9 0%,#d7dbf8 100%); /* Chrome10+,Safari5.1+ */
      background:-o-linear-gradient(top,  #e0e2f9 0%,#d7dbf8 100%); /* Opera 11.10+ */
      background:-ms-linear-gradient(top,  #e0e2f9 0%,#d7dbf8 100%); /* IE10+ */
      background:linear-gradient(to bottom,  #e0e2f9 0%,#d7dbf8 100%); /* W3C */
      filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e2f9', endColorstr='#d7dbf8',GradientType=0 ); /* IE6-9 */
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
  }
  
  #header input[type="radio"] { display:none; }
  #header div { display:inline-block; margin:0; }
  
  #header label {
      cursor: pointer;
      display: inline-block;
      margin:.25em;
      padding:.7em;
      border-radius:50em;
      font: 12px arial, sans-serif;
      color: #444;
      text-shadow: 0px 0px .25em #fff;
      background:#f6f7fd; /* Old browsers */
      background:-moz-linear-gradient(top,  #f6f7fd 0%, #e0e2f9 100%); /* FF3.6+ */
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f7fd), color-stop(100%,#e0e2f9)); /* Chrome,Safari4+ */
      background:-webkit-linear-gradient(top,  #f6f7fd 0%,#e0e2f9 100%); /* Chrome10+,Safari5.1+ */
      background:-o-linear-gradient(top,  #f6f7fd 0%,#e0e2f9 100%); /* Opera 11.10+ */
      background:-ms-linear-gradient(top,  #f6f7fd 0%,#e0e2f9 100%); /* IE10+ */
      background:linear-gradient(to bottom,  #f6f7fd 0%,#e0e2f9 100%); /* W3C */
      filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f7fd', endColorstr='#e0e2f9',GradientType=0 ); /* IE6-9 */
  }
  #header label:hover { color: #111; background: #f6f7fd; }
  #header label:active { color: #111; background: #c1c5f6;}
  #header input[type="radio"]:checked + label { color: #e0e2f9; background: #666; box-shadow:inset 0 0 .25em #000; text-shadow: 0px 0px .25em #e0e2f9; }
  </code></pre>
  
  <p><strong>JQuery/JavaScript</strong></p>
  
  <pre><code>// Call New
  $('#newdoc').click(function() {
      $("#designer")[0].click();
      code.val('');
      preview.html(code.val());
  });
  
  $('#opt-1').click(function(){
      if($('#opt-1').attr('checked')=="checked"){
          $(this).attr('checked', false);
          $('input#opt-5').attr('checked', true);
      }else{
          $('input#opt-5').attr('checked', false);
      }
  });
  
  // Call Designer UI
  $('#designer').on('change',function() {
      $('#canvasbg, #canvas').show();
      $('#settingsdisplay').hide();
      $("#fullwebsitecode").hide();
      $("#bottom, #code").hide();
      return false;
  });
  
  // Call Settings
  $('#settings').on('change',function() {
      $('#settingsdisplay').show();
      $('#canvasbg, #canvas, #bottom, #code').hide();
      $("#fullwebsitecode").hide();
      return false;
  });
  
  // Call Show Code
  $('#codecanvasdisplay').on('change',function() {
      $("#bottom, #code").show();
      $('#settingsdisplay').hide();
      $('#canvasbg, #canvas').hide();
      $("#fullwebsitecode").hide();
      return false;
  });
  </code></pre>