How to define $(this) to add checkbox values to textarea

Question

INTRO

I have the following script that I want to use on a form that contains multiple questions that are answered with multiple checkbox inputs. I want to add checkbox values when checked to the corresponding textarea within the "alloptions" class.

JSFIDDLE http://jsfiddle.net/qFfMP/31/ This is how it works if there is only one set of checkboxes on a form. If you have two sets of checkboxes with the same class then selections are added to both textareas. I want to keep checkboxes checked within the alloptions class to only be posted to the nested textarea within that class.

QUESTION

How would I define a select event for "alloptions" as $(this) as this class defines inputs within? OR Would I better off defining "cb" as $(this) and reworking the code; which if I do not have to I rather not.

CODE

<div class="alloptions">
<textarea class="fulloptions" type="text" value=""></textarea><br>
<input type="checkbox" class="cb" value="Test1" />Test1<br>
<input type="checkbox" class="cb" value="Test2" />Test2<br>
<input type="checkbox" class="cb" value="Test3" />Test3
</div>
<hr>
<div class="alloptions">
<textarea class="fulloptions" type="text" value=""></textarea><br>
<input type="checkbox" class="cb" value="Test1" />Test1<br>
<input type="checkbox" class="cb" value="Test2" />Test2<br>
<input type="checkbox" class="cb" value="Test3" />Test3
</div>



<script>
$(document).ready(function () {

var checkboxes = $(".alloptions  input[type='checkbox']");
checkboxes.on('change', function() {
    $('.alloptions').find('.fulloptions').val(
        checkboxes.filter(':checked').map(function(item) {
            return this.value;
        }).get().join(', ')
     );
});

});
</script>

hard to help without a proper explanation , in words, of what you are trying to do — charlietfl
– charlietfl, Commented Mar 20, 2016 at 18:18
@chalietfl you helped me yesterday with a similar question. Different script, different problem. With this script i'm trying to use "alloptions" as the trigger instead of the input. I'm thinking I should rework this script to use input as the trigger for $(this) instead. — Cliff T
– Cliff T, Commented Mar 20, 2016 at 18:29
@charlietfl - Add checkbox values to the coresponding textarea when checked — Cliff T
– Cliff T, Commented Mar 20, 2016 at 18:32
@charlietlf - i updated the question to better define what i'm looking to do. — Cliff T
– Cliff T, Commented Mar 20, 2016 at 18:39

gaetanoM · Accepted Answer · 2016-03-20 22:03:22Z

1

If I understood correctly you are looking for something like:

$(function () {
  $(".alloptions  input[type='checkbox']").on('change', function() {
    $(this).siblings('textarea.fulloptions').val($(this).siblings('input[type="checkbox"]').add(this).filter(':checked').map(function(item) {
      return this.value;
    }).get().join(', ')
                                                );
  });
});

<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>


<div class="alloptions">
    <textarea class="fulloptions" type="text" value=""></textarea><br>
    <input type="checkbox" class="cb" name="option1" value="Test1" />Test1<br>
    <input type="checkbox" class="cb" name="option1" value="Test2" />Test2<br>
    <input type="checkbox" class="cb" name="option1" value="Test3" />Test3
</div>
<br>
<div class="alloptions">
    <textarea class="fulloptions" type="text" value=""></textarea><br>
    <input type="checkbox" class="cb" value="Test1" />Test1<br>
    <input type="checkbox" class="cb" value="Test2" />Test2<br>
    <input type="checkbox" class="cb" value="Test3" />Test3
</div>

If you wrapped each checkbox in a label, the only way I immagine is (this is not a correct way to use the labels):

$(function () {
  $(".alloptions  input[type='checkbox']").on('change', function () {
    var parentDiv = $(this).closest('div.alloptions');
    parentDiv.find('textarea.fulloptions').val(parentDiv.find('input[type="checkbox"]').filter(':checked').map(function (item) {
      return this.value;
    }).get().join(', ')
                                              );
  });
});

<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>

<div class="alloptions">
    <textarea class="fulloptions" type="text" value=""></textarea><br>
    <label>Test1
        <input type="checkbox" class="cb" name="option1" value="Test1"/>Test1<br>
    </label>
    <label>Test2
        <input type="checkbox" class="cb" name="option1" value="Test2"/>Test2<br>
    </label>
    <label>Test3
        <input type="checkbox" class="cb" name="option1" value="Test3"/>Test3
    </label>
</div>
<br>

<div class="alloptions">
    <textarea class="fulloptions" type="text" value=""></textarea><br>
    <label>Test1
        <input type="checkbox" class="cb" name="option1" value="Test1"/>Test1<br>
    </label>
    <label>Test2
        <input type="checkbox" class="cb" name="option1" value="Test2"/>Test2<br>
    </label>
    <label>Test3
        <input type="checkbox" class="cb" name="option1" value="Test3"/>Test3
    </label>
</div>

edited Mar 20, 2016 at 22:03

answered Mar 20, 2016 at 19:18

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

charlietfl Over a year ago

what if user types other content in textarea? This UI concept itself doesn't really make sense

Cliff T Over a year ago

@gaemaf - Exactly! Was not sure how to trigger the event. Thank you very much for your time as i'm sure I would have spent many more hours on this without your help.

Cliff T Over a year ago

@charlietfl - thanks for your time as well. To answer your question the textarea would be hidden.

Cliff T Over a year ago

@gaemaf - I do not want to intrude on your time again but i have been reading up on the use of siblings. How would i navigate if i wrapped each checkbox in a label? I have tried numerous approaches without any luck.

Cliff T Over a year ago

@gaemaf - You are amazing! I'm not sure I would have gotten this to work based on the direction I was headed. Although I suspected siblings was not the answer when using labels. Which by the way I was not aware using labels to select a checkbox is considered a miss-used method. Still so much to learn. Thanks again.

Collectives™ on Stack Overflow

How to define $(this) to add checkbox values to textarea

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related