テキストエリアにデータを追加する

Question

クリックしてテキストエリアに出力するチェックボックスがいくつかあります。このビットは機能していますが、各結果がリストに表示された後は、カンマがあります。削除方法はわかりません。また、私はいくつかのテキストでテキストエリアをプリロードし、プリロードされたテキストを上書きすることなく、その下に結果を表示したいと思います。あなたはカンマを持っているのはなぜこれまでのところ、私はこの

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()を呼び出すため、コンマで区切られた配列項目が返されます。配列の項目を空の文字列''で結合すると、通常のテキストが表示されます。

なぜテキストが表示されないのですか？あなたがいないとき、あなたはそこにテキストを設定しているが、それが初めてで空になっている、allValsであなたのtextareaのtextを設定しますので、jQueryのinitializer機能であなたは、最後の行でupdateTextArea()を呼び出す

任意の値を選択します。

ここでは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

それぞれの結果が表示されています後、私は方法がわからないコンマがあります に削除

私はあなたが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"; 
    }) 
}