jquery all children of a child has class

Question

im trying to run a function once all children of a child has a specific class, here is my code so far, i have tinkered with this a quite a bit in various ways but can't seem to get it to work.

#section-1 is the parent

.job-row-wrapper is the child of above

.checkbox is the child of above

once all .checkbox has class of checked added -- do something

  <!-- SECTION 1 -->
  <div class="section-wrapper" id="section-1">
    <div class="job-row-wrapper-header" id="header-1">section title goes here</div>
    <div class="job-row-wrapper">
      <div class="job-row-column">title goes here</div>
      <div class="check-box"></div>
    </div>
    <div class="job-row-wrapper">
      <div class="job-row-column">title goes here</div>
      <div class="check-box"></div>
    </div>
    <div class="job-row-wrapper">
      <div class="job-row-column">title goes here</div>
      <div class="check-box"></div>
    </div>
    <div class="job-row-wrapper">
      <div class="job-row-column">title goes here</div>
      <div class="check-box"></div>
    </div>

  </div>

 
 if ($("#section-1 > .job-row-wrapper > .check-box > .checked").length) {
 console.log("All checkboxes have the  class checked");
 }

Answer 1

const $allCheckboxes = $("#section-1 > .job-row-wrapper > .check-box");
const $allCheckedCheckboxes = $("#section-1 > .job-row-wrapper > .check-box.checked");

if ($allCheckboxes.length === $allCheckedCheckboxes.length) {
  console.log("All checkboxes have the class checked");
}