Событие изменения формы при нажатии флажка

Question

Я действительно не могу понять, в чем здесь проблема.Я хочу, чтобы флажок в форме был нажат, чтобы добраться до ближайшего «h2» и получить его текст.

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(); <---- UNDEFINED
    //let text = $(this).find("h2").html(); <---- UNDEFINED
    console.log(text);
   }
});

Я перепробовал много вещей и методов, просто не могу найти какой-либо элемент от «ввода» до дерева DOM.

Answer 1

Я нашел решение:

$(document).ready(function(){
   $('#productFilterForm input:checkbox').on('change', function () {
      let text = $(this).closest('div.option').prevAll('h2.attribute-name').html();
      console.log(text);
   }
});

Answer 2

попробуйте этот код

$('#productFilterForm').on('change', function () {
let text = $(this).find("h2").html();
console.log(text);   
})