Как добавить значение в textarea, когда флажок установлен

Question

Я использую следующую функцию, которую я только что нашел здесь, на SO, которая выполняет работу в отношении моего вопроса, только одна проблема состоит в том, что у меня длинный список выбора, и когда пользователь устанавливает более 3-4 флажков, некоторыетекста или значения, добавленного в текстовую область, больше не отображаются.Есть ли способ, чтобы каждый раз, когда блок проверял, текст, который добавляется в текстовую область, всегда виден?Любая помощь очень ценится.

- спасибо!

<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();
});

Answer 1

сначала вам понадобится элемент textarea, поэтому измените тег ввода с помощью textarea. Затем в функции updateTextArea вы можете установить для нее атрибут row, чтобы весь текст в ней был виден. см http://jsfiddle.net/7b5fk/1/

Answer 2

Сначала вы захотите изменить video0_tags на текстовую область.Затем вы захотите прикрепить событие .click () к каждому флажку, чтобы каждый выбор обновлял текстовое поле соответствующим образом.

<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");
         });
    });
});

Answer 3

Измените ввод текста на textarea, и он автоматически добавит полосу прокрутки по мере необходимости.