4

Possuo alguns checkbox e quero que, ao clicar em um botão, todos os nomes destes selecionados, irem para um input separados por ",".

Tentei fazer desta forma, mas não deu certo:

<input type="checkbox" name="cbx-1">
<input type="checkbox" name="cbx-2">
<input type="checkbox" name="cbx-3">

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

<button type="button" id="bt-ok">Ok</button>

<script type="text/javascript">
$('#bt-ok').click(function() {
    $("input:checkbox[name=type]:checked").each(function(){
        $("#text").val($(this).val());
    });
});
</script>

Exemplo no Jsfiddle.

Onde estou errando?

2

3 Respostas 3

5

Aproveitando o que estavas a fazer, podes fazer o seguinte:

var vals;
$('#bt-ok').click(function() {
    vals = [];
    $("input[type='checkbox']:checked").each(function(){
        vals.push($(this).prop('name'));
    });
    $("#text").val(vals.join(', '));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="cbx-1">
<input type="checkbox" name="cbx-2">
<input type="checkbox" name="cbx-3">

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

<button type="button" id="bt-ok">Ok</button>

3
  • 1
    Perfeito @Miguel. Só uma pergunta, porque não poderia ser declarado var vals = [];? Seria por alguma prática de boa programação?
    – jsnow
    Commented 16/01/2018 às 17:36
  • 1
    @jsnow porque queremos delegar um array vazio a cada click do btn, caso contrário ficaria buggado se clicasses mais do que uma vez: jsfiddle.net/4xafkufd, se não declararmos a varíavel vazia vai continuar a ser populada, aí não faz sentido
    – Miguel
    Commented 16/01/2018 às 17:38
  • 1
    Entendi. Muito obrigado!
    – jsnow
    Commented 16/01/2018 às 17:39
1
$('#bt-ok').click(function() {
  $("#text").val('');
  $("input:checkbox:checked").each(function(){
    //cbx_selecionados.push($(this).val());
    $("#text").val($("#text").val() + $(this).attr('name') + ', ');
  });
});
2
  • Valeu, funcionou também. Mas só um detalhe: quando se tem apenas um checkbox marcado, ele adiciona a vírgula, também.
    – jsnow
    Commented 16/01/2018 às 17:41
  • Era só um exemplo, ia melhorar agora com mais tempo, mas a resposta do @Miguel esclarece melhor. Commented 16/01/2018 às 19:18
0

Eu não percebi qual é o conteudo que desejas por mas o teu select "[name=type]" não faz qualquer sentido. Penso que é este o teu objectivo!

$('#bt-ok').click(function() {
    var temp;
    $("input:checkbox:checked").each(function(){
        //cbx_selecionados.push($(this).val());
    console.log(this);
    temp +=$(this).val()+",";

    });
    temp = temp.slice(0, -1);
    $("#text").val(temp);
});

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 .