如何使用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>

---

编辑： OP 询问如果 HTML 不能更改怎么办

如果更改 HTML 不是一个选项，您可以通过 javascript 找到复选框和 span 元素，如下所示：

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>