<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<style type="text/css">
.event-children {
    margin-left: 20px;
    list-style: none;
    display: none;
}
</style> <ul name="events-categories" id="events-categories">
    <input type="checkbox" id="masterall">Check All    
    <li><input type="checkbox" name="secilenCat[]" value="<?=$goster['catid']?>" placeholder="" id="category-185" class="events-category"> ana kategori
        <ul class="event-children">            <li><input type="checkbox" name="secilenCat[]" value="<?=$goster2['catid']?>" id="child-category-190" class="events-category child events-child-category">alt kategori
                 <ul class="event-children">            <li><input type="checkbox" name="secilenCat[]" value="<?=$goster2['catid']?>" id="child-category-190" class="events-category child events-child-category2">alt alt kategori
               
            </li>        </ul>
            </li>        </ul>
    </li>
</ul><script type="text/javascript">
    /**
 * left sidebar events categories
 * toggle sub categories
 */
 $('.events-category').change( function(){
    console.log('showing sub categories');
    var c = this.checked;
    if( c ){
        $(this).parent().find('> .event-children').css('display', 'block');
    }else{
        $(this).next('.event-children').css('display', 'none');    }
   
}); $('#masterall').change( function(){
    $('input[type=checkbox]').attr('checked', this.checked);
});
 $('.events-child-category-all').change( function(){
    $(this).parent().siblings().find(':checkbox').attr('checked', this.checked);
});
</script>