html 如何使用jquery获取文本区域的内容

iq3niunx  于 2023-03-06  发布在  jQuery
关注(0)|答案(2)|浏览(150)

这个问题已经问过了,但是,我无法找到我的具体情况的答案。
我有几个复选框,其中如果复选框被选中,我希望'复制'复制的文本区域的内容旁边的复选框。

function copySelect() {
  var copyString="";
  $(".category>input").each(function (index, element) {
      if (element.checked) {
          copyString += element.nextSibling.innerText + " ";
      }
  });
  copyToClipboard(copyString);
}

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

我尝试过将element.nextSibling.innerText更改为element.nextSibling.valueelement.nextSibling.innerHTML,但它们都返回undefined。

wn9m85ua

wn9m85ua1#

element. nextSibling返回任何类型的节点,在本例中它返回一个文本节点,你应该使用element. nextElementSibling来获取下一个元素(Input,textArea,select),然后你就可以得到带有value的文本了.
我更正了你的代码片段。

function copySelect() {
  var copyString="";
  $(".category>input").each(function (index, element) {
      if (element.checked) {
          copyString += element.nextElementSibling.value + " ";
      }
  });
  copyToClipboard(copyString);
}

function copyToClipboard(text) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val(text).select();
  document.execCommand("copy");
  $temp.remove();
}
<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>
5jdjgkvh

5jdjgkvh2#

当循环输入复选框时,可以使用$(this).next().val()

function copySelect() {
  var copyString="";
  $(".category>input").each(function (index, element) {
      if (element.checked) {
          copyString += $(this).next().val() + " ";
      }
  });
  copyToClipboard(copyString);
}

相关问题