Vfrdtyky

let els = [...document.getElementsByClassName('check')];

els.forEach(e => e.addEventListener('change', () => {

  document.getElementById('foo').value = els.filter(x => x.checked).map(x => x.value).join();

}))

.flex {

  display: flex;

  flex-direction: column;

}

<div class="flex">

  <input id="foo" />

  <label><input type="checkbox" class="check" value="A"/>A</label>

  <label><input type="checkbox" class="check" value="B"/>B</label>

  <label><input type="checkbox" class="check" value="C"/>C</label>

</div>

function displayVals() {

  var singleValues = $( "#single" ).val();

  var multipleValues = $( "#multiple" ).val() || ;

  $( "p" ).html( "Single: " + singleValues +

    " Multiple: " + multipleValues.join( ", " ) );

}

$( "select" ).change( displayVals );

displayVals();

p {

    color: red;

    margin: 4px;

  }

  b {

    color: blue;

  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p></p>

<select id="single">

  <option>Single</option>

  <option>Single2</option>

</select>

<select id="multiple" multiple="multiple">

  <option selected="selected">A</option>

  <option>B</option>

  <option selected="selected">C</option>

</select>

var checked = ;



function updateValue() {

  $('#selected').val(checked.toString());

}



$('[type=checkbox]').click(function(e) {

    var value = e.target.value;



    if(e.target.checked) {

        checked.push(value);

    } else {

        checked.splice(checked.indexOf(value), 1);

    }

    updateValue();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" value="A">A<br>

<input type="checkbox" value="B">B<br>

<input type="checkbox" value="C">C<br>

<input type="text" id="selected">

$(function() {

  

  const valArray = ;	// our value array here what gonna show in textarea

	

  /**

   - on change check if checkbox checked or not

   - if checked push value of checkbox to array

     if not search in our array "valArray" and get it's index then remove it

   - change textarea value with the new array "valArray"

  */

  $('.checkboxes input').on('change', function(e) {

    const $thisVal = $(this).val(),

	  isChecked = $(this).is(':checked');



    if (isChecked) {

      valArray.push($thisVal);	

    } else {

      const searchOnThisVal = valArray.find(item => $thisVal === item),

	    getTheIdx = valArray.indexOf(searchOnThisVal);



      valArray.splice(getTheIdx, 1);

    }

		

    $('.textarea').empty();

    $('.textarea').text(valArray);

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="checkboxes">

  <label>

		<input type="checkbox" value="a">

		the checkbox A.

	</label>

	<label>

		<input type="checkbox" value="b">

		the checkbox B.

	</label>

	<label>

		<input type="checkbox" value="c">

		the checkbox C.

	</label>

</div>



<textarea class="textarea" placeholder="your choice..."></textarea>