vamos direto ao assunto, agradeço desde já.
const inputs = [...document.querySelectorAll("input[name='nomes[]']")];
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="nomes[]" value="01" />
<input type="checkbox" name="nomes[]" value="02" />
<input type="checkbox" name="nomes[]" value="03" />
<input type="checkbox" name="nomes[]" value="04" />
<div id="resultado">
<input type="hidden" name="total" value="seria a soma dos valores">
<input type="hidden" name="nomes" value="seria os nomes[] marcados(A,B,C..)">
</div>
o código esta funcionando como deveria, porém gostaria de saber como fazer alguma alteração para que os input's dentro da DIV recebam os dados em vez da DIV.