Как получить текст диапазона из флажка, используя Javascript?

Question

Предположим, у меня есть следующий бит кода:

  <p>
    <label>
      <input name="milk" type="checkbox">
      <span>Milk</span>
    </label>
  </p>

Как я могу использовать javascript для получения текста между тегами span? Результат должен быть Milk, если вы вошли на консоль. Спасибо!

Answer 1

Вы можете отправить this в метод onclick вашего флажка, чтобы вызываемая функция могла отслеживать элемент, по которому щелкнули, а также получать доступ к своему родительскому элементу для доступа к дочернему элементу span родительского элемента.

См. Ниже:

function printText(el) {
  console.log( el.parentNode.querySelector('span').innerHTML );
}

<p>
  <label>
    <input name="milk" type="checkbox" onclick="printText(this)">
    <span>Milk</span>
  </label>
</p>

---

Редактировать: ОП спрашивает, что, если HTML не может быть изменено

При изменении HTML - это не вариант, вы можете найти элементы checkbox и span через javascript следующим образом:

var chkBox = document.querySelector('input[type="checkbox"][name="milk"]');

chkBox.addEventListener("click", function() {
  if(this.checked) { // remove this if statement if you want it to print on every click
    console.log( this.parentNode.querySelector('span').innerHTML );
  }
});

<p>
  <label>
    <input name="milk" type="checkbox">
    <span>Milk</span>
  </label>
</p>