Copy text to different text area when checkmark is placed

user_10012573 0
Viewed 68

I am trying to modify a script that I found here at SO. The task of the script is that when a check mark is placed next to a text, the text is copied to a text area.

The modification I am trying to do is to have several text areas, each one with its own list of predefined texts.

The script I am trying to modify is this one :

    <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>

An the HTML part looks like this

<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>

It may be something very simple or not, I am not a programmer. I am just learning and doing stuff empirically. Can anyone help is very welcome!

textarea html jquery javascript
1 Answers

You can directly use click event on checkbox and using $(this) get closest class taglist and then get all checkbox where it is checked using each loop.

Demo Code :

$(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>

user_106064000
Related