选中复选框时如何向textarea添加值

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.

我正在使用我刚刚在这里找到的以下功能,我的问题只涉及一个问题,我有一长串的选择,当用户检查超过3-4个复选框的一些文本或者textarea上添加的值不再可见。是否有任何方法可以在每次检查框时检查正在添加到文本区域的文本是否始终可见?任何帮助是极大的赞赏。

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

3 个解决方案

#1

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.net/7b5fk/1/

首先,您需要一个textarea元素,因此请使用textarea更改输入标记。然后在updateTextArea函数上,您可以在其上设置rows属性,以便其中的所有文本都可见。见http://jsfiddle.net/7b5fk/1/

#2

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.

首先,您需要将video0_tags更改为textarea。接下来,您需要将.click()事件附加到每个复选框,以便每个选择都相应地更新textarea。

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

#3

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

将文本输入更改为textarea,它将根据需要自动添加滚动条。

#1

#2