title: Check Radio button on div click
body: <p>I would like radio button to check/uncheck whenever i click it's parent div.
  Radio buttons are originally hidden.</p>
  
  <p>I was trying to achieve that by wrapping <code>&lt;label&gt;</code> around the div. It works, but <code>jQ.toggleClass</code> stops working.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="big"&gt;
  This is a div 1
  &lt;input id="chb" type="radio" /&gt;
  &lt;/div&gt;
  
  &lt;br/&gt;
  
  &lt;div class="big"&gt;
  This is a div 2
  &lt;input id="chb" type="radio" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.big {
  
      width:100px;
      height:100px;
      background-color:red;
      cursor:pointer;
  
  }
  
  .hli {
  
      border:2px solid blue;
  
  }
  
  /*.chb{display:none;}*/
  </code></pre>
  
  <p><strong>JQ</strong></p>
  
  <pre><code>$('.big').click(function() {
  $('.hli').toggleClass('hli');   
  $(this).toggleClass('hli');
  });
  </code></pre>
  
  <blockquote>
    <p><strong>JSFIDDLE: <a href="http://jsfiddle.net/QqVCu/2/">http://jsfiddle.net/QqVCu/2/</a></strong></p>
  </blockquote>