如何使用 Javascript 從復選框中獲取跨度文本？

Question

假設我有以下代碼：

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

如何使用 javascript 獲取span標簽之間的文本？ 如果登錄到控制台，結果應該是Milk 。 謝謝！

Answer 1

您可以將this發送到復選框的 onclick 方法中，因此它正在調用的 function 可以跟蹤被單擊的元素並訪問它的父元素以訪問父元素的子 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>

---

編輯： OP 詢問如果 HTML 無法更改怎么辦

如果更改 HTML 不是一個選項，您可以通過 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>