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