Cada vez que se produzca el evento
change
(marcar o desmarcar un checkbox) obtén el contenido del segundo
<textarea>
y genera un array separando el contenido a partir de los saltos de línea (esto suponiendo que irás insertando el valor de cada checkbox en una línea diferente), para lo cual puedes emplear el método
.split(). Una vez hecho esto, verifica si el checkbox pulsado se encuentra marcado o desmarcado. En el primer caso (checkbox marcado), verifica si el valor del checkbox
no se encuentra en el array que generaste a partir del contenido del
<textarea>
; de no estar, solo concaténalo al valor del mismo añadiendo un salto de línea (
\n
). En el segundo caso (checkbox desmarcado), verifica si el valor del checkbox
se encuentra en el array; de estar, elimínalo empleando el método
.splice() y, finalmente, vuelca el contenido del array al segundo
<textarea>
como valor del mismo, para lo cual tendrás que echar mano del método
.join() el cual convertirá el contenido del array en una cadena de caracteres.
DEMO Comentario: No es adecuado tener los checkbox en el primer
<textarea>
que empleas como contenedor. Mejor tenlos libres o bien dentro de un
elemento en bloque, como puede ser un
<div>
.