如何用jQuery获取选中复选框旁textarea的内容？

你的代码里element.nextSibling拿到的是复选框和textarea之间的空白文本节点（HTML里的换行、空格），不是目标textarea元素，所以调用value/innerHTML会返回undefined。下面是两种修复方案：

方案1：用jQuery方法简化操作 #

直接用jQuery的next()方法获取复选框的下一个兄弟元素（自动跳过空白文本节点）：

function copySelect() {
  var copyString = "";
  $(".category>input:checked").each(function() {
      // 用next()获取对应的textarea元素，再取val()
      copyString += $(this).next(".box").val() + " ";
  });
  copyToClipboard(copyString);
}

function copyToClipboard(text) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val(text).select();
  document.execCommand("copy");
  $temp.remove();
}

方案2：原生JS修改（保留原逻辑） #

把nextSibling换成nextElementSibling，获取下一个元素节点而非文本节点：

function copySelect() {
  var copyString = "";
  $(".category>input").each(function (index, element) {
      if (element.checked) {
          // 用nextElementSibling获取下一个元素节点（textarea）
          copyString += element.nextElementSibling.value + " ";
      }
  });
  copyToClipboard(copyString);
}

function copyToClipboard(text) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val(text).select();
  document.execCommand("copy");
  $temp.remove();
}

HTML部分无需修改，保持原结构即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="checkbox-group">
  <div class="category">
    <input type="checkbox" id="content1" value="state" />
      <textarea class="box" id="text1">Test content 1</textarea><br>
    <input type="checkbox" id="content2" value="salePrice" />
      <textarea class="box" id="text2">Test content 2</textarea><br>
    <input type="checkbox" id="content3" value="manager" />
      <textarea class="box" id="text3">Test content 3</textarea>
  </div>
  <input id="copybtn" type="button" value="Copy" onclick="copySelect()" />
</div>

两种方案都能正确获取选中复选框对应的textarea内容并复制到剪贴板：方案1利用jQuery选择器和方法更简洁，方案2贴近你原本的原生JS逻辑。

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