Question

我有一些复选框，当点击输出到textarea时。这个位有效，但是在列出每个结果之后会有一个逗号，我不知道如何删除。另外，我想用一些文本预加载textarea并将结果列在下面，而不会覆盖我预加载的文本。到目前为止我有这个

function updateTextArea() {
  var allVals = [];
  $('.taglist :checked').each(function(i) {

    allVals.push((i != 0 ? "\r\n" : "") + $(this).val());
  });
  $('#form1').val(allVals).attr('rows', allVals.length);

}
$(function() {
  $('.taglist input').click(updateTextArea);
  updateTextArea();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="textfield" id="form1" name="form1">My text here</textarea>
<div class="taglist">
  <label><input type="checkbox" value="Value 1">Value 1</label>
  <label><input type="checkbox" value="Value 2">Value 2</label>
  <label><input type="checkbox" value="Value 3">Value 3</label>
  <label><input type="checkbox" value="Value 4">Value 4</label>
  <label><input type="checkbox" value="Value 5">Value 5</label>
</div>

Answer 1

为什么你有逗号？

因为您隐式调用数组上的toString()，这将返回以逗号分隔的数组项。通过空字符串''加入您的数组项目，您将获得正常文本。

为什么你没有收到文字？

您已经在那里设置了文字，但是在jQuery initializer功能中，您在最后一行调用了updateTextArea()，因此它会设置text的{{1}} textarea，当您没有选择任何值时，第一次为空。

此处它在allVals上隐式调用toString并获取数组的字符串表示。

＆＃13;

arr

＆＃13;

工作示例

＆＃13;

var arr = ['1', '2', '3'] ;

console.log(arr);

＆＃13;

function updateTextArea() {
  var allVals = ['My text here'];
  $('.taglist :checked').each(function(i) {
    allVals.push((i != 0 ? "\r\n" : "") + $(this).val());
  });
  $('#form1').val(allVals.join('')).attr('rows', allVals.length);

}
$(function() {
  $('.taglist input').click(updateTextArea);
});

＆＃13;

Answer 2

如果将数组设置为val()的参数，则会将其隐式转换为逗号分隔的字符串。您可以使用allVals.join()加入数组，或者，如果您根本不需要数组形式的值，则可以直接将它们连接为字符串。

我还实施了您的请求，以便能够将初始值保留在以下代码段中，方法是将其保存为data()。（您可能希望跳过检查以省略第一个换行符 - 编辑：我实施了动态检查以查看初始textarea值是否为空）

function updateTextArea() {
  var allVals = $('#form1').data('initialVal'),
      lineCount = 1;
  $('.taglist :checked').each(function(i) {
    allVals+= (i != 0 || allVals.length > 0 ? "\r\n" : "") + $(this).val();
    lineCount++;
  });
  $('#form1').val(allVals).attr('rows', lineCount);

}
$(function() {
  $('.taglist input').click(updateTextArea);
  
  $('#form1').data('initialVal', $('#form1').val());
  updateTextArea();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="textfield" id="form1" name="form1">My text here</textarea>
<div class="taglist">
  <label><input type="checkbox" value="Value 1">Value 1</label>
  <label><input type="checkbox" value="Value 2">Value 2</label>
  <label><input type="checkbox" value="Value 3">Value 3</label>
  <label><input type="checkbox" value="Value 4">Value 4</label>
  <label><input type="checkbox" value="Value 5">Value 5</label>
</div>

Answer 3

每个结果列出后都有一个我不知道如何的逗号   除去

我想用一些文字预加载textarea并得到结果   下面列出它而不覆盖我预加载的文本

您可以使用array.join('')删除逗号。关于不覆盖现有文本，您可以存储现有文本并在将数组写入文本区域时重复使用

＆＃13;

// if you want just the original text and no new line after it do:
var originalText =  $('#form1').val();

 // if you want a new line after the original text do:
 originalText =  $('#form1').val() + '\r\n';

function updateTextArea() {
  var allVals = [];
  allVals.push(originalText);
  
  $('.taglist :checked').each(function(i) {
    allVals.push((i != 0 ? "\r\n" : "") + $(this).val());
  });
  
  $('#form1').val(allVals.join('')).attr('rows', allVals.length);

}

$(function() {
  $('.taglist input').click(updateTextArea);
  updateTextArea();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="textfield" id="form1" name="form1">My text here</textarea>
<div class="taglist">
  <label><input type="checkbox" value="Value 1">Value 1</label>
  <label><input type="checkbox" value="Value 2">Value 2</label>
  <label><input type="checkbox" value="Value 3">Value 3</label>
  <label><input type="checkbox" value="Value 4">Value 4</label>
  <label><input type="checkbox" value="Value 5">Value 5</label>
</div>

＆＃13;

Answer 4

像这样它会起作用，看看加入

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="textfield" id="form1" name="form1">My text here</textarea>
        <div class="taglist">
        <label><input type="checkbox" value="Value 1">Value 1</label>
        <label><input type="checkbox" value="Value 2">Value 2</label>
        <label><input type="checkbox" value="Value 3">Value 3</label>
        <label><input type="checkbox" value="Value 4">Value 4</label>
        <label><input type="checkbox" value="Value 5">Value 5</label>
        </div>

＆＃13;

private string _fubar;   //_camelCase
public string Fubar { ... }

＆＃13;

Answer 5

您可以尝试：

http://codepen.io/joaocarvalhowd-1472219370/pen/egoBKQ?editors=1111]

    var text_initial = document.querySelector('#form1').value  + "\r\n";

function checkboxsListen() {
  var checks = document.querySelectorAll('.taglist input[type="checkbox"]');

  Array.prototype.forEach.call(checks, function(check) {

    check.addEventListener('change', function() {
      updateTextArea();
    })

  })
}

checkboxsListen();

function updateTextArea() {
  var textarea = document.querySelector('#form1')
  textarea.value = text_initial;
  var checks_selected = document.querySelectorAll('.taglist input[type="checkbox"]:checked');

  Array.prototype.forEach.call(checks_selected, function(check) {
    textarea.value += check.value + "\r\n";
  })
}

将数据附加到文本区域

5 个答案: