Check at least one checkbox in the form when the form is expanded

I have a form that expands when it is checked. When the form is expanded, there are multiple check boxes - I need to make sure that at least one checkbox is checked at this time. I have the following html/js code that works when none of the checkboxes are selected, but when I select the main checkbox, error goes away. Error should go away when any checkbox is selected in the expanded form.

 $(document).ready(function () {
    $('#checkBtn').click(function() {
      checked = $("input[type=checkbox]:checked").length;

      if(!checked) {
        alert("You must check at least one checkbox.");
        return false;
      }

    });
  });

.inputs {
  display: none;
}

.foo:checked + .inputs {
  display: initial;
}

<script src="http://ift.tt/1q8wkLp"></script>

<form action="foo">
  <input type="checkbox" class="foo"> Pre-designed contour:
  <div class="inputs"> 

    <input type="checkbox" name="contour" value="fiveSeven" id="fiveSeven"> 5x7
    <input type="checkbox"  required id="sixEight"> 6x8
    <input type="checkbox" required id="sixNine"> 6x9
  </div>   
</form>

<input type="button" value="Test Required" id="checkBtn">