Update div with checkbox value marked

Question

I have these checkboxes on my page

<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" />

I need a function to update a div printing checkbox values marked without refresh on the page. It is necessary that the div is also updated when the checkbox is unchecked, deleting the value in the div.

Thank you in advance.

Answer 1

If you want div to be updated when you check and uncheck checkboxes you need to use the event change. In this event you have to go through all <input> and put its value if the attribute checked is the true.

Example:

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>

Documentation for the MDN change event

Answer 2

With 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
    }
});
});