title: JQuery toggling checkboxes while clicking parent div
body: <p>Here i'm having set of checkboxes with lables with in a div.checkbox</p>
  
  <p>I want to toggle the checkboxes while clicking parent div.checkbox</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="checkbox"&gt;
    &lt;input id="checkbox-1" type="checkbox" name="Data1" value="option1" /&gt;
    &lt;label for="checkbox-1"&gt;HTML&lt;/label&gt;
    &lt;br /&gt;
    &lt;input id="checkbox-2" type="checkbox" name="Data2" value="option2" /&gt;
    &lt;label for="checkbox-2"&gt;CSS&lt;/label&gt;
     &lt;br /&gt; 
      &lt;input id="checkbox-3" type="checkbox" name="Data3" value="option3" /&gt;
    &lt;label for="checkbox-3"&gt;HTML&lt;/label&gt;
    &lt;br /&gt;
    &lt;input id="checkbox-4" type="checkbox" name="Data4" value="option4" /&gt;
    &lt;label for="checkbox-4"&gt;CSS&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>$('.checkbox').click(function(){
      var el = $('.checkbox input[type=checkbox]')
      if(el.is(':checked')){
            find(el).removeAttr('checked');
      }
      else {
          el.attr('checked','checked');
      }
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/HNmhL/2/" rel="nofollow noreferrer">working demo</a></p>
  
  <p>How can i do this, please can any one help me out</p>
  
  <p>Thanks</p>