Change background color and font color of div when checkbox checked

I have a form with several check boxes, like this:

<div class="panel box box-primary">
  <div class="box-header with-border">

    <!--Change Header Color and Background-->

    <h4 class="box-title">
      <a data-toggle="collapse" data-parent="#accordion" href="#Gender" aria-expanded="true" class="">Gender</a>
    </h4>
  </div>
  <div id="Gender" class="panel-collapse collapse in">
    <div class="box-body">
      <div class="col-md-4">

        <!--When a single/all checkboxes are checked-->

        <ul>
          <li><input type="checkbox" name="_fiters[]" value="1">1</li>
          <li><input type="checkbox" name="_fiters[]" value="2">1</li>
        </ul>
      </div>
    </div>
  </div>
</div>

What I'm trying to do is when the single/all check box is checked, change the background and color of the div which have the H4 tag. When unchecked all checkbox within div, remove the background color and h4 color. How can I do this using jquery or jquery+javascript?

for better understanding

Thanks