亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

已解決430363個問題，去搜搜看，總會有你想問的

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

關注

首頁猿問如何使用 Javascript...

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

Html5

慕的地8271018 2023-12-19 10:27:32

假設我有以下代碼： <p> <label> <input name="milk" type="checkbox"> <span>Milk</span> </label> </p>如何使用javascript獲取span標簽之間的文本？如果登錄到控制臺，結果應為 Milk。謝謝！

查看完整描述

1 回答

胡說叔叔

TA貢獻1804條經驗獲得超8個贊

您可以將 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>

反對回復 2023-12-19

1 回答
0 關注
136 瀏覽

關注

添加回答

舉報

0/150

提交

取消

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

掃描二維碼
關注慕課網微信公眾號