2

Tenho esses checkbox na minha página

<input type="checkbox" name="dezenas[]" value="01" />
<input type="checkbox" name="dezenas[]" value="02" />
<input type="checkbox" name="dezenas[]" value="03" />
<input type="checkbox" name="dezenas[]" value="04" />

To precisando de uma função pra atualizar uma div imprimindo os valores dos checkbox marcados sem refresh na página. É necessário que a div seja atualizada também quando o checkbox for desmarcado, apagando o valor na div.

Agradeço desde já.

1
  • Qual a sua dúvida? 3/11/2017 às 14:50

2 Respostas 2

3

Se pretende que a div seja atualizada quando marca e desmarca as checkbox's precisa de utilizar o evento change. Nesse evento tem de percorrer todos os <input> e colocar o seu valor se o atributo checked estiver a true.

Exemplo:

const inputs = [...document.querySelectorAll("input[name='dezenas[]']")];
const res = document.getElementById("resultado");

inputs.forEach(x => x.addEventListener("change", ()=> {
  //esta função corre quando houve alteração de um dos checkboxes
  res.innerHTML = ""; //limpar o resultado

  //passar em todos os inputs e adicionar o seu value e <br> se tiver checked
  inputs.forEach (y => res.innerHTML += y.checked ? y.value + "<br>" : "");
}));
<input type="checkbox" name="dezenas[]" value="01" />
<input type="checkbox" name="dezenas[]" value="02" />
<input type="checkbox" name="dezenas[]" value="03" />
<input type="checkbox" name="dezenas[]" value="04" />

<div id="resultado"></div>

Documentação para o evento change no MDN

2
  • Muito Obrigado Isac. 3/11/2017 às 18:40
  • @BrunoOliveira De nada, fico contente por ter ajudado
    – Isac
    3/11/2017 às 18:45
0

Com jquery:

$( "input:checkbox" ).on('click', function() { // evento click para inputs checkbox
$('#myDivId').html(''); // limpa div
$( "input:checkbox" ).each(function () { // percorrer inputs checkbox
    if ($(this).is(':checked')) { // se checked
        $('#myDivId').append($(this).val()); // adiciona valor a div
    }
});
});
2
  • Poderia explicar o que o seu código está fazendo pra ajudar a compreensão? 3/11/2017 às 15:11
  • Alterado com explicação, peço desculpa se percebi mal e não é o que pretende. 3/11/2017 às 15:18

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 .