I am using the following function that I just found here on SO that does the work with regards to my question only one issue is that, I have a long list of selection and when a user check more than 3-4 checkboxes some of the text or value that is added on the textarea are no longer visible. Is there any way so that everytime a box is check the text that is being added to the text area is always visible? Any help is greatly appreciated.

-thanks ahead!

<input type="text" value="" class="textfield" id="video0_tags" name="video0_tags">
<div class="taglist">
<label><input type="checkbox" value="2D Animation">2D Animation</label>
<label><input type="checkbox" value="3D Animation">3D Animation</label>
<label><input type="checkbox" value="Animatronics">Animatronics</label>
<label><input type="checkbox" value="Architectural">Architectural</label>
<label><input type="checkbox" value="Cartoon">Cartoon</label>
<label><input type="checkbox" value="Cell Animation">Cell Animation</label>
<label><input type="checkbox" value="Character Animation">Character Animation</label><label><input type="checkbox" value="Cut & Paste">Cut & Paste</label>
<label><input type="checkbox" value="Doodle">Doodle</label>
<label><input type="checkbox" value="HDR">HDR</label>
<label><input type="checkbox" value="High Speed">High Speed</label>
<label><input type="checkbox" value="Illustration">Illustration</label>
<label><input type="checkbox" value="Live Action">Live Action</label>
<label><input type="checkbox" value="Macro">Macro</label>
<label><input type="checkbox" value="Motion Design">Motion Design</label>
<label><input type="checkbox" value="Motion Graphics">Motion Graphics</label>
<label><input type="checkbox" value="Moving Installation">Moving Installation</label>
</div>


function updateTextArea() {     
   var allVals = [];
   $('.taglist :checked').each(function() {
      allVals.push($(this).val());
   });
   $('#video0_tags').val(allVals)
   }
   $(function() {
      $('#video0_tags input').click(updateTextArea);
      updateTextArea();
});

I am using the following function that I just found here on SO that does the work with regards to my question only one issue is that, I have a long list of selection and when a user check more than 3-4 checkboxes some of the text or value that is added on the textarea are no longer visible. Is there any way so that everytime a box is check the text that is being added to the text area is always visible? Any help is greatly appreciated.

-thanks ahead!

<input type="text" value="" class="textfield" id="video0_tags" name="video0_tags">
<div class="taglist">
<label><input type="checkbox" value="2D Animation">2D Animation</label>
<label><input type="checkbox" value="3D Animation">3D Animation</label>
<label><input type="checkbox" value="Animatronics">Animatronics</label>
<label><input type="checkbox" value="Architectural">Architectural</label>
<label><input type="checkbox" value="Cartoon">Cartoon</label>
<label><input type="checkbox" value="Cell Animation">Cell Animation</label>
<label><input type="checkbox" value="Character Animation">Character Animation</label><label><input type="checkbox" value="Cut & Paste">Cut & Paste</label>
<label><input type="checkbox" value="Doodle">Doodle</label>
<label><input type="checkbox" value="HDR">HDR</label>
<label><input type="checkbox" value="High Speed">High Speed</label>
<label><input type="checkbox" value="Illustration">Illustration</label>
<label><input type="checkbox" value="Live Action">Live Action</label>
<label><input type="checkbox" value="Macro">Macro</label>
<label><input type="checkbox" value="Motion Design">Motion Design</label>
<label><input type="checkbox" value="Motion Graphics">Motion Graphics</label>
<label><input type="checkbox" value="Moving Installation">Moving Installation</label>
</div>


function updateTextArea() {     
   var allVals = [];
   $('.taglist :checked').each(function() {
      allVals.push($(this).val());
   });
   $('#video0_tags').val(allVals)
   }
   $(function() {
      $('#video0_tags input').click(updateTextArea);
      updateTextArea();
});

• javascript
• jquery
• html
• checkbox
• textarea

• so did you want the text area to grow each time you added something? – Patricia Commented Mar 28, 2011 at 13:38
• Is that to say that the textarea's content overflows? You could force a scroll. – canon Commented Mar 28, 2011 at 13:39
• You're saying "textarea" but your code shows a text input. They are very different, which one do you mean? – Albireo Commented Mar 28, 2011 at 13:47
• Do you want to make sure the most recently checked item is the most prominently visible, or just make sure its possible (e.g. scrolling) to view it? – ExtraGravy Commented Mar 28, 2011 at 13:54
• @kappa thank you for clarifying. I'm sorry everyone I was wrong when I use the word textarea. Its the input that I am referring. I want to make sure that the most recently checked item is the most prominently visible as what extragravy said any idea? – vaqz Commented Mar 28, 2011 at 14:37

3 Answers 3

first, you will need to have a textarea element, so change the input tag with the textarea. Then on updateTextArea function, you can set the rows attribute on it so that all the text within it is visible. see http://jsfiddle/7b5fk/1/

First, you'll want to change video0_tags to a textarea. Next, you'll want to attach the .click() event to each checkbox so that every selection updates the textarea accordingly.

<textarea id="video0_tags"></textarea>

$(document).ready(function(){
    $(".taglist input").click(function(){
         $("#video0_tags").text('');
         $(".taglist :checked").each(function(){
              $("#video0_tags").append( $(this).val() + "\n");
         });
    });
});

Change the text input to a textarea and it will automatically add a scrollbar as it needs it.