jquery - jQuery 更新 Textarea 而不替换内容

Question

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

好像想不通 它只是替换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 这样的列表，但我会做正则表达式吗？

Answer 1

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

function ExportButton(){
  var data = "";

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

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

小提琴

Answer 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);

    });
}

Answer 3

这只是因为jQuery无法识别text(). <textarea>由于它就像一个输入字段，您可以使用以下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+',');
    });
}

Answer 4

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

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

Answer 5

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