选中复选框时如何向文本区域添加值答案

【问题标题】：How to add value to textarea when checkbox is checked选中复选框时如何向文本区域添加值
【发布时间】：2025-11-24 04:45:01
【问题描述】：

我正在使用我刚刚在 SO 上找到的以下功能，它可以解决我的问题，只有一个问题是，我有一个很长的选择列表，当用户选中超过 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();
});

【问题讨论】：

那么您是否希望每次添加内容时文本区域都增大？
是不是说textarea的内容溢出了？你可以强制滚动。
您说的是“textarea”，但您的代码显示文本 input。它们非常不同，您指的是哪一种？
您想确保最近检查的项目是最显眼的，还是只是确保它可以（例如滚动）查看？
@kappa 感谢您的澄清。对不起，当我使用 textarea 这个词时我错了。它是我所指的输入。我想确保最近检查的项目是最显眼的，就像extragravy所说的任何想法一样？

标签： javascript jquery html checkbox textarea

【解决方案1】：

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

【讨论】：

嗨，Alex，感谢您提供的出色工作示例。有什么方法可以将文本添加到已经在输入中的单词旁边（顺便说一句，当我使用我的意思是输入的单词 textarea 时我错了）并且当它到达末尾时（我的意思是右侧输入）文本向左移动，为添加到右侧的新文本留出空间？有什么想法吗？提前谢谢！

【解决方案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");
         });
    });
});

【讨论】：

【解决方案3】：

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

【讨论】：