2

Gostaria de que conforme o usuário fosse clicando nas opções do checkbox, o valor do mesmo fosse acrescentado em um input text:

<div class="form-group col-md-7">
        <label class="checkbox-inline"><input type="checkbox" value="Laranja">Laranja</label>
        <label class="checkbox-inline"><input type="checkbox" value="Uva">Uva</label>
        <label class="checkbox-inline"><input type="checkbox" value="Banana">Banana</label>
    </div>      

Ao clicar nos 3, o input text fosse preenchido com as opções.

É possível?

3 Respostas 3

4

Uma maneira simples de fazer isso é com javascript.

Adicionei um input com o id="resultado" para utilizar no javascript e criei a function add que recebe value como parâmetro.

Obs: Ficou simples mas está funcionando.

function add(value){
  var resultado = document.getElementById('resultado');
resultado.value += " " + value;
}
<div class="form-group col-md-7">
        <label class="checkbox-inline"><input onclick="add(value)" type="checkbox" value="Laranja">Laranja</label>
        <label class="checkbox-inline"><input onclick="add(value)" type="checkbox" value="Uva">Uva</label>
        <label class="checkbox-inline"><input onclick="add(value)" type="checkbox" value="Banana">Banana</label>
    </div>
    <input type="text" id="resultado">

4

Usando a mesma logica que a resposta do @Carlinhos, mas adicionando a opção de remover:

function add(_this){
  var resultado = document.getElementById('resultado');
  var value = _this.value;
  var hasAdd = resultado.value.search(_this.value) > 0
  if(_this.checked && !hasAdd){
    resultado.value += ' '+_this.value;
  }else if(!_this.checked && hasAdd){
    var er = new RegExp(_this.value, 'ig');
    resultado.value = resultado.value.replace(er, '');
  }
  resultado.value = resultado.value.replace(/ {2,}/g, ' ');
}
<div class="form-group col-md-7">
  <label class="checkbox-inline"><input onclick="add(this)" type="checkbox" value="Laranja">Laranja</label>
  <label class="checkbox-inline"><input onclick="add(this)" type="checkbox" value="Uva">Uva</label>
  <label class="checkbox-inline"><input onclick="add(this)" type="checkbox" value="Banana">Banana</label>
</div>
<input type="text" id="resultado">

0
0

Acredito que esse código pode te ajudar!

</head>

<script type="text/javascript">
    function mudaNomeFruta(idInput){
        var fruta = document.getElementById(idInput).value;
        document.getElementById('textFruta').value = fruta;
    }

</script>

Laranja Uva Banana

<input type="text" id="textFruta"></input>     

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .