放置复选标记时将文本复制到不同的文本区域答案

【问题标题】：Copy text to different text area when checkmark is placed放置复选标记时将文本复制到不同的文本区域
【发布时间】：2020-07-11 12:53:33
【问题描述】：

我正在尝试修改我在 SO 找到的脚本。该脚本的任务是，当在文本旁边放置复选标记时，将文本复制到文本区域。

我正在尝试做的修改是有几个文本区域，每个区域都有自己的预定义文本列表。

我要修改的脚本是这个：

    <script>
    /* update text area */
    function updateTextArea() {
        var allVals = [];
        $('.taglist :checked').each(function(i) {
            allVals.push((i!=0?"\r\n":"")+ $(this).val());
            });
            $('#text_area_3').val(allVals).attr('rows',allVals.length) ;
            }
            $(function() {
                $('.taglist input').click(updateTextArea);
                updateTextArea();
    });
</script>

HTML 部分如下所示

<body>
<dt><button >copy</button><a> Title for text area #1</a></dt>
<dd><ul><il class="list-textbox-item">
    <div class="taglist">
        <label><input type="checkbox" value="predefined text 1 for text area 1">predefined text1 for textarea1</label><br>
        <label><input type="checkbox" value="predefined text 2 for text area 1">predefined text2 for textarea1</label><br>
        </div>
    <textarea id="text_area_1"></textarea></il></ul></dd>
<br>

<dt><button >copy</button><a> Title for text area #2</a></dt>
<dd><ul><il class="list-textbox-item">
    <div class="taglist">
        <label><input type="checkbox" value="predefined text 1 for text area 2">predefined text1 for textarea2</label><br>
        <label><input type="checkbox" value="predefined text 2 for text area 2">predefined text3 for textarea2</label><br>
        </div>
    <textarea id="text_area_2"></textarea></il></ul></dd>
<br>

<dt><button >copy</button><a> Title for text area #3</a></dt>
<dd><ul><il class="list-textbox-item">
    <div class="taglist">
        <label><input type="checkbox" value="predefined text 1 for text area 3">predefined text1 for textarea3</label><br>
        <label><input type="checkbox" value="predefined text 2 for text area 3">predefined text2 for textarea3</label><br>           
        </div>
    <textarea id="text_area_3"></textarea></il></ul></dd>
<br>

这可能是非常简单的事情，我不是程序员。我只是在凭经验学习和做事。任何人都可以帮助非常受欢迎！

【问题讨论】：

标签： javascript html jquery textarea

【解决方案1】：

您可以直接在复选框上使用click event 并使用$(this) 获取最接近的类taglist，然后使用each 循环获取所有选中的复选框。

演示代码：

$(function() {
  //on click of checkbox 
  $('input[type=checkbox]').click(function() {
    var allVals = [];
    //get closest taglist div
    var elem = $(this).closest('.taglist')
    //use elem to find checkbox under that div
    elem.find('input[type=checkbox]:checked').each(function(i) {
      allVals.push((i != 0 ? "\r\n" : "") + $(this).val());

    });
    //add value to nearest textarea
    $(this).closest('li').find('textarea').val(allVals);

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<dt><button >copy</button><a> Title for text area #1</a></dt>
<dd>
  <ul>
    <li class="list-textbox-item">
      <div class="taglist">
        <label><input type="checkbox" value="predefined text 1 for text area 1">predefined text1 for textarea1</label><br>
        <label><input type="checkbox" value="predefined text 2 for text area 1">predefined text2 for textarea1</label><br>
      </div>
      <textarea id="text_area_1"></textarea></li>
  </ul>
</dd>
<br>

<dt><button >copy</button><a> Title for text area #2</a></dt>
<dd>
  <ul>
    <li class="list-textbox-item">
      <div class="taglist">
        <label><input type="checkbox" value="predefined text 1 for text area 2">predefined text1 for textarea2</label><br>
        <label><input type="checkbox" value="predefined text 2 for text area 2">predefined text3 for textarea2</label><br>
      </div>
      <textarea id="text_area_2"></textarea></li>
  </ul>
</dd>
<br>

<dt><button >copy</button><a> Title for text area #3</a></dt>
<dd>
  <ul>
    <li class="list-textbox-item">
      <div class="taglist">
        <label><input type="checkbox" value="predefined text 1 for text area 3">predefined text1 for textarea3</label><br>
        <label><input type="checkbox" value="predefined text 2 for text area 3">predefined text2 for textarea3</label><br>
      </div>
      <textarea id="text_area_3"></textarea></li>
  </ul>
</dd>
<br>

【讨论】：