Primeira coisa que deve fazer é obter a referência dos elementos que vai trabalhar.
Dentro do javascript para obter-se a referência de objetos html cujo os atributos ids estão definidos pode ser usado document.getElementById()
que retorna a referência do elemento através do seu atributo ID
.
O próximo passo é definir um manipulador de eventos que será o responsável por a cada click dum botão de rádio enviar o valor do atributo value do elemento, cujo evento foi disparado, para o <textarea>
utilizando para isso sua propriedade Node.innerText
que será preenchida pela propriedade Event.target
que é a referência ao objeto que enviou o evento.
E finalmente instalam-se os evento nos respectivos elemento usando Element.addEventListener()
que registra uma espera de evento em um elemento.
Para iniciar o código com o <textarea>
devidamente preenchido foi simulado um click através do método EventTarget.dispatchEvent()
usando um MouseEvent
//Cria as referências aos elementos HTML usádos no código.
let msg = document.getElementById("msg");
let rad1 = document.getElementById("optionsRadios1");
let rad2 = document.getElementById("optionsRadios2");
let rad3 = document.getElementById("optionsRadios3");
//Define a função cujo a finalidade é manipular os eventos click
function radioClick(e){
//Substitui o texto de msg pelo conteúdo do atributo value do elemento que gerou o evento.
msg.innerText = e.target.value;
}
//Instala o evento click para o handler radioClick em cada um dos radio buttons.
rad1.addEventListener(`click`, radioClick);
rad2.addEventListener(`click`, radioClick);
rad3.addEventListener(`click`, radioClick);
//Envia um click para rad1.
rad1.dispatchEvent(new MouseEvent('click'));
<div class="form-group col-xs-12">
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="status" id="optionsRadios1" value='Sem contato' checked>
<span style="color: red">Sem contato</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="status" id="optionsRadios2" value='Pendente'>
<span style="color: #E9D62B">Pendente</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="status" id="optionsRadios3" value='Com contato'>
<span style="color: green">Com contato</span>
</label>
</div>
</div>
<textarea name="msg" required class="form-control" id="msg" placeholder="Descreva como foi o atendimento"></textarea>
</div>