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

时间:2011-03-28 13:32:44

标签: javascript jquery html checkbox textarea

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

- 提前谢谢!

<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 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:2)

首先,您需要将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");
         });
    });
});

答案 2 :(得分:1)

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