If any check box checked, another div will be fadeIn(); [closed]

This code works :

<input type="checkbox" name="data[]" value="1">Mathematics
<input type="checkbox" name="data[]" value="2">Physics
<input type="checkbox" name="data[]" value="3">Chemistry
<input type="checkbox" name="data[]" value="4">Biology
<input type="checkbox" name="data[]" value="5">English
<input type="checkbox" name="data[]" value="6">History
Another div
<div class="my_div" style="display: none;"> This Div will fadeIn and fadeOut if Minimum one dive is checked </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('input').change(function(){
            var count = 0;
            var inputs = $('input');
            inputs.each(function(){
                if (this.checked ) {
                    count++;
                }
            });
            if(count == 0){
                $('div').fadeOut();
            }
            if(count == 1){
                $('div').fadeIn();
            }
        });
    });
</script>

You can do this with css if the div folder is is after the checkboxes in the HTML markup

EXAMPLE

CSS:

input[type=checkbox]:checked ~ div {
  opacity: 1;
}
div {
  transition:all 0.3s;
  opacity: 0;
}

Html markup needs to look like this

<input type="checkbox" name="data[]" value="6">History
<div>Test</div>

Otherwise with css we cant select it.