Here i'm having set of checkboxes with lables with in a div.checkbox

I want to toggle the checkboxes while clicking parent div.checkbox

**HTML**

```
<div class="checkbox">
  <input id="checkbox-1" type="checkbox" name="Data1" value="option1" />
  <label for="checkbox-1">HTML</label>
  <br />
  <input id="checkbox-2" type="checkbox" name="Data2" value="option2" />
  <label for="checkbox-2">CSS</label>
   <br /> 
    <input id="checkbox-3" type="checkbox" name="Data3" value="option3" />
  <label for="checkbox-3">HTML</label>
  <br />
  <input id="checkbox-4" type="checkbox" name="Data4" value="option4" />
  <label for="checkbox-4">CSS</label>
</div>

```

**JQUERY**

```
$('.checkbox').click(function(){
    var el = $('.checkbox input[type=checkbox]')
    if(el.is(':checked')){
          find(el).removeAttr('checked');
    }
    else {
        el.attr('checked','checked');
    }
});

```

[working demo](http://jsfiddle.net/HNmhL/2/)

How can i do this, please can any one help me out

Thanks