jQuery 更新 Textarea 而不替换内容答案

【问题标题】：jQuery Update Textarea without replacing contentjQuery 更新 Textarea 而不替换内容
【发布时间】：2013-05-15 14:56:40
【问题描述】：

在 JavaScript 中，您可以只使用 =. 或 += 将 现有数据 添加到数据中。我如何在 jQuery 中做到这一点。我正在尝试在我的表单中添加一个复选框列表，每个字段都应该在文本区域中建立一个列表，用逗号分隔数据。

似乎无法理解。它只是替换了q 的值，并没有添加。

jQuery

function ExportButton(){
    var data = $('#orders').text();
    var selected = new Array();
        $('.mycb:checked').each(function() {
        var q = $(this).attr('value');
        alert(q);
        $('#orders').text(data+q+',');

    });
}

HTML

<div><input type="checkbox" id="mycb2" class="mycb" value="Chocolate" /> Chocolate</div>
<div><input type="checkbox" id="mycb1" class="mycb" value="Vanilla" /> Vanilla</div>
<a href="javascript:ExportButton()">Export to Textarea</a>
<textarea rows="10" cols="80" id="orders" name="orders"></textarea>

jsFiddle

http://jsfiddle.net/GJXKW/3/

任何帮助将不胜感激。我想建立一个像 4,5,3,4,24,2424,2 这样的列表，在没有逗号结尾的文本区域中会是一个奖励，但我可能会做正则表达式？

【问题讨论】：

jQuery 的text() 方法没有添加内容，它完全取代了它。请改用prepend() 或append()。

标签： jquery arrays checkbox textarea

【解决方案1】：

似乎没有人意识到这是在循环中，text()、html() 和 val() 将在每次迭代时覆盖内容。您真正需要做的就是将字符串集中在循环中，并在循环之后附加一次：

function ExportButton(){
  var data = "";

  $('.mycb:checked').each(function(i,el) {
      data += el.value + ',';
  });

  $('#orders').text( data );
}

FIDDLE

【讨论】：

+1 了解详细信息并正确阅读我的问题。我添加了一个空白衬垫，以确保在运行函数之前表单是空白的，这样就不会重复任何数据。
@TheBlackBenzKid - 不客气，如果你想每次都从一个空的 textarea 开始，只是不要从它开始的价值。我会更新答案！

【解决方案2】：

使用.val 而不是.text jsFiddle

    function ExportButton(){
    var data;
    var selected = new Array();
        $('.mycb:checked').each(function() {
        var q = $(this).attr('value');  
            data = $('#orders').val();
            if(data ){
              data = data + "," +q 
            }else {
                  data = q 
            }
        $('#orders').val(data);

    });
}

【讨论】：

使用条件语句很有趣，所以加 1。

【解决方案3】：

这只是因为 jQuery 无法识别 <textarea> 的 text()。因为它就像一个输入字段，你可以使用val()函数：

function ExportButton(){
    var data = $('#orders').val();
    var selected = new Array();
    $('#mycb:checked').each(function() {
        var q = $(this).attr('value');
        alert(q);
        $('#orders').val(data+q+',');
    });
}

【讨论】：

【解决方案4】：

看看这个http://jsfiddle.net/steelywing/GJXKW/8/

$('#export').click(function () {
    var checked = [];
    $('input:checked').each(function () {
        checked.push($(this).val());
    });
    $('textarea').val(checked.join(','));
});

【讨论】：

【解决方案5】：

你总是可以混合使用 jQuery 和 vanilla JS，所以如果你有一些有用的东西，那就去做吧，不要调用 jQuery 的开销来添加一个简单的文本节点。

【讨论】：

你在说什么？