checkbox toggle

HTML

<p>Types</p>
<label>
<input type="checkbox" id='fruit' value="fruit" />Fruit</label><br>
<label>
<input type="checkbox" id='veggies' value="fruit" />Vegetables</label><br>
<p>Subtypes</p>
<label>
<input type="checkbox" name='fruittypes' id='apple' value="fruit" />Apple</label><br>
<label>
<input type="checkbox" name='veggietypes' value="fruit" />Cucumber</label><br>

CSS

p{
    margin-bottom: 0px;
    font-weight: bold;
}

JavaScript

$("#fruit").change(function(){
    if ( this.checked )
    {
               $(':input:checkbox[name="fruittypes"]').prop('checked', true)
    } else {
               $(':input:checkbox[name="fruittypes"]').prop('checked', false)
    }
    });
$("#veggies").change(function(){
    if ( this.checked )
    {
               $(':input:checkbox[name="veggietypes"]').prop('checked', true)
    } else {
               $(':input:checkbox[name="veggietypes"]').prop('checked', false)
    }
    });