Tengo algunas casillas de verificación que cuando se hace clic en la salida a un área de texto. Este bit funciona, sin embargo, después de que cada resultado aparece en la lista, hay una coma que no sé cómo eliminar. También me gustaría precargar el área de texto con algo de texto y tener los resultados enumerados a continuación sin sobrescribir mi texto precargado. Hasta ahora tengo esto

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>
0
Greg 16 feb. 2017 a las 14:47

5 respuestas

La mejor respuesta

Si establece una matriz como argumento de val(), se convierte implícitamente en una cadena separada por comas. Puede unirse a la matriz usando allVals.join() o, si no necesita los valores en forma de matriz, puede concatenarlos directamente como una cadena.

También implementé su solicitud para poder mantener el valor inicial en el siguiente fragmento, guardándolo con data(). (Probablemente desee omitir la comprobación para omitir el primer salto de línea --editar: implementé una comprobación dinámica para ver si el valor inicial del área de texto está vacío)

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>
2
Constantin Groß 16 feb. 2017 a las 12:29

Puedes probar:

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";
  })
}
-1
João Carvalho 16 feb. 2017 a las 12:12

Así funcionará, mira unirse

        function updateTextArea() {     
           var allVals = [];
           $('.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();
        });
<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>
0
patrick 16 feb. 2017 a las 11:51

Después de que cada resultado aparezca en la lista, hay una coma que no sé cómo eliminar

Me gustaría precargar el área de texto con algún texto y tener los resultados enumerados a continuación sin sobrescribir mi texto precargado

Puede deshacerse de la coma usando array.join(''). En lo que respecta a no sobrescribir el texto existente, puede almacenar el texto existente y reutilizarlo al escribir la matriz en el área de texto

// 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();
});
<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>
1
Nope 16 feb. 2017 a las 12:15

¿Por qué tienes comas?

Porque implícitamente llama a un toString() en su matriz, que devolverá los elementos de su matriz separados por comas. Únase a los elementos de su matriz con la cadena vacía '' y obtendrá el texto normal.

¿Por qué no recibe el texto?

Ha establecido el texto allí, pero en la función jQuery initializer llama a updateTextArea() en la última línea, por lo que establecerá text de su textarea con el {{X4 }}, que está vacío la primera vez, cuando no selecciona ningún valor.

Aquí llama toString implícitamente en arr y obtiene la representación de cadena de su matriz.

var arr = ['1', '2', '3'] ;

console.log(arr);

Ejemplo de trabajo

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);
});
<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>
2
Suren Srapyan 16 feb. 2017 a las 12:29