仅传入复选框input元素时，如何获取其旁关联文本？

嘿，这个场景我太熟悉了！刚好有几种简单的方法能帮你拿到复选框关联的文本，直接基于你手里的<input>元素就能实现：

方法一：直接从父label元素提取文本（最简便） #

因为你的复选框是嵌套在<label>标签里的，所以可以直接通过input的父节点获取label的文本内容：

// 假设传入的input元素是checkboxEl
const labelText = checkboxEl.parentElement.textContent.trim();
console.log(labelText); // 这里就能输出Frankie、Samuel这类关联文本啦

解释：parentElement会直接定位到input的父节点也就是对应的label，textContent会获取label内的所有文本内容，最后用trim()去掉多余的换行和空格，得到干净的目标文本。

方法二：精准筛选文本节点（应对复杂label结构） #

如果你的label里除了复选框还嵌套了其他元素（比如<span>、<i>这类），可以专门提取纯文本节点，避免拿到其他元素的干扰：

// 传入的input元素
const checkboxEl = ...;
const label = checkboxEl.parentElement;
// 筛选出所有纯文本节点并拼接内容
const textNodes = Array.from(label.childNodes).filter(node => node.nodeType === Node.TEXT_NODE);
const labelText = textNodes.map(node => node.textContent.trim()).join(' ').trim();
console.log(labelText);

这种方法更健壮，就算label结构变复杂也能准确拿到你要的文本。

额外补充：非嵌套场景的兼容方案 #

虽然你现在是input嵌套在label里的结构，但如果后续遇到input和label通过for/id属性关联的情况（不是嵌套），也可以用这个方法：

const checkboxEl = ...;
const label = document.querySelector(`label[for="${checkboxEl.id}"]`);
const labelText = label.textContent.trim();

内容的提问来源于stack exchange，提问作者Arash Howaida