Jquery - Form change event on checkbox click

I really cant understand what is the problem here. I want when checkbox in the form is clicked to get to the closest "h2" and to get its text.

HTML

<form action="" method="get" id="productFilterForm">
  <h2 class="attribute-name">Brands</h2>
  <div class="option">
      <label>
          <input type="checkbox" name="Royal Canin" value="163">Royal Canin
      </label>
  </div>
  <div class="option">
      <label>
          <input type="checkbox" name="Brit" value="164">Brit
      </label>
  </div>
  <div class="option">
      <label>
          <input type="checkbox" name="Purina Pro Plan" value="165">Purina Pro Plan
      </label>
  </div>
</form>

JavaScript

$(document).ready(function(){
   $('#productFilterForm').on('change', 'input:checkbox', function () {
    let text = $(this).closest("h2").html();
    console.log(text);    <---- UNDEFINED
   }
});

I tried many things and methods, just cant find any element from the "input" up to the DOM tree.