本文详解在 jquery 中正确获取 textarea 元素值的方法，重点解决因 dom 节点类型混淆（如误用 `nextsibling` 获取文本节点）导致 `undefined` 的常见问题，并提供可直接运行的健壮实现方案。
在使用 jQuery 操作表单元素时，一个高频需求是：根据用户交互（如勾选复选框），动态读取相邻 <textarea> 中的文本内容并拼接处理。但初学者常陷入一个典型误区：调用原生 DOM 属性 element.nextSibling 试图获取紧邻的 <textarea>，结果却返回 undefined —— 这是因为 nextSibling 返回的是包括空白文本节点在内的任意节点，而 HTML 中 <input> 和 <textarea> 之间往往存在换行、空格等文本节点，而非目标元素本身。
✅ 正确做法是使用 element.nextElementSibling：它严格返回下一个元素节点（即 <textarea>），再通过 .value 属性安全获取其内容（注意：<textarea> 的值必须用 .value，而非 .innerText 或 .innerHTML）。
以下是修正后的完整实现：
function copySelect() {
let copyString = "";
$(".category > input[type='checkbox']").each(function () {
if (this.checked) {
// ✅ 使用 nextElementSibling 精准定位相邻 textarea 元素
const textarea = this.nextElementSibling;
// ✅ 安全检查：确保存在且为 textarea
if (textarea && textarea.tagName === "TEXTAREA") {
copyString += textarea.value.trim() + " ";
}
}
});
copyToClipboard(copyString);
}
function copyToClipboard(text) {
if (!text) return;
const $temp = $("<input>");
$("body").append($temp);
$temp.val(text).select();
try {
document.execCommand("copy");
console.log("Copied:", text);
} catch (err) {
alert("Copy failed. Please try manually.");
} finally {
$temp.remove();
}
}? 关键改进说明：
- 使用 $(".category > input[type='checkbox']") 精确限定选择器，避免误选其他输入类型；
- 增加 textarea.tagName === "TEXTAREA" 类型校验，提升鲁棒性；
- 添加 trim() 清除首尾空白，避免冗余空格；
- copyToClipboard 中加入 try...catch 处理 execCommand 兼容性异常（现代浏览器推荐改用 navigator.clipboard.writeText()，但需 HTTPS 环境）；
? 延伸建议：若结构更复杂（如 <textarea> 不严格相邻），推荐使用语义化关联，例如为每个 checkbox 设置 data-target="#text1" 属性，再通过 $(this).data("target") 动态查找，使 HTML 结构与 JS 逻辑解耦，更易维护。
最终效果：勾选任意复选框后点击“Copy”，对应 <textarea> 的内容将被拼接复制到剪贴板，无 undefined 干扰，稳定可靠。
