Daten an Textbereich anhängen

Question

Ich habe ein paar Checkboxen, die beim Klicken auf einen Textbereich ausgegeben werden. Dieses Bit funktioniert, aber nachdem jedes Ergebnis aufgelistet wird, gibt es ein Komma, von dem ich nicht weiß, wie es entfernt wird. Außerdem möchte ich das Textfeld mit etwas Text laden und die Ergebnisse darunter anzeigen lassen, ohne meinen vorgeladenen Text zu überschreiben. Bisher habe ich diese

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

Wenn Sie ein Array als Argument von val() festlegen, wird es implizit in eine durch Kommas getrennte Zeichenfolge konvertiert.Sie können das Array entweder mit allVals.join() verbinden oder, wenn Sie die Werte in Array-Form überhaupt nicht benötigen, können Sie sie direkt als String verketten.

Ich habe auch Ihre Anfrage implementiert, um den Anfangswert im folgenden Snippet zu behalten, indem Sie es mit speichern. (Sie werden wahrscheinlich die Prüfung für das Weglassen der ersten Zeilenumbruch --edit überspringen wollen: Ich habe eine dynamische Überprüfung implementiert, um zu sehen, ob die anfängliche TextArea- Wert leer ist)

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 2

Warum Sie Kommas haben?

Weil Sie implizit Anruf ein toString() auf Ihrem Array, die durch Komma Ihrer Array-Elemente getrennt zurück. Verbinden Sie die Elemente Ihres Arrays mit der leeren Zeichenfolge '' und Sie erhalten normalen Text.

Warum erhalten Sie den Text nicht?

Sie den Text dort eingestellt haben, aber in der jQuery initializer Funktion Sie updateTextArea() in der letzten Zeile nennen, so ist es text Ihrer textarea mit dem allVals gesetzt wird, die zum ersten Mal leer ist, wenn Sie nicht tun Wählen Sie einen beliebigen Wert.

Hier ruft es toString implizit auf die arr und ruft die Zeichenfolgendarstellung Ihres Arrays.

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

 
console.log(arr);

Arbeitsbeispiel

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>

Answer 3

Nach jedem Ergebnis dort aufgelistet wird ein Komma ich weiß nicht, wie zu

entferne ich möchte das Textfeld mit Text vorab zu laden und haben die Ergebnisse darunter aufgelistet ohne mein vorbelasteten Text

Überschreiben

Sie von dem Komma array.join('') bekommen kann befreien. In Bezug auf die nicht vorhandenen Text zu überschreiben, können Sie den vorhandenen Text speichern können und es wieder verwenden, wenn das Array in den Textbereich

// 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>

Answer 4

Wie dieses Schreiben wird es funktionieren, schauen beitreten

 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>

Answer 5

können Sie versuchen:

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"; 
    }) 
}