追加數據到文本區域

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

如果將數組設置爲參數val()，則會將其隱式轉換爲逗號分隔的字符串。您可以使用allVals.join()加入數組，或者，如果根本不需要數組形式的值，則可以將它們直接連接爲字符串。

我還實現了您的請求，以便能夠在以下片段中保留初始值，方法是使用data()進行保存。 （您可能會想跳過檢查省略第一行中斷--edit：我實現了一個動態的檢查，以查看初始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 2

爲什麼你有逗號？

因爲你隱含呼叫的toString()陣列上，這將返回以逗號分隔的數組項。通過空字符串''加入你的數組的項目，你會得到正常的文本。

爲什麼你沒有得到的文字？

您已設置的文本出現，但在jQuery的initializer函數調用updateTextArea()最後一行，所以它會設置你的textarea的text與allVals，裏面是空的，第一時間，當你不選擇任何值。

它在arr上隱含調用toString並獲取數組的字符串表示形式。

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

 
console.log(arr);

工作實例

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

後每個結果被列有一個逗號，我不知道該怎麼以 刪除

我想預裝一些文字textarea的，並有它下面列出的結果 沒有覆蓋我的預載的文本

你可以擺脫使用array.join('')逗號。 在問候不是覆蓋現有的文本，你可以存儲現有文本和寫數組文本區域

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

喜歡這個會工作的時候重新使用它，看看加入

 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

你可以嘗試：

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