0

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>
Improve this question
7
  • 1
    hard to help without a proper explanation , in words, of what you are trying to do 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. Commented Mar 20, 2016 at 18:29
  • That still doesn't explain what you are trying to do Commented Mar 20, 2016 at 18:30
  • @charlietfl - Add checkbox values to the coresponding textarea when checked Commented Mar 20, 2016 at 18:32
  • @charlietlf - i updated the question to better define what i'm looking to do. Commented Mar 20, 2016 at 18:39

1 Answer 1

Reset to default
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>

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

5 Comments

what if user types other content in textarea? This UI concept itself doesn't really make sense
@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.
@charlietfl - thanks for your time as well. To answer your question the textarea would be hidden.
@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.
@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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.