1

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.

2
  • Qual é o nome que queres mostrar? Todos têm o mesmo nome... :/
    – Sergio
    30/11/2018 às 15:22
  • os nomes estão sendo trazidos do BD, mas pra exemplificar seria "Teclado, Mouse, Fone, Monitor" 30/11/2018 às 15:25

1 Resposta 1

1

Aqui fica uma sugestão:

const inputs = [...document.querySelectorAll("input[type='checkbox']")];
const res = document.getElementById("resultado");
const total = res.querySelector('[name="total"]');
const nomes = res.querySelector('[name="nomes"]');


const calcular = () => {
  total.value = inputs.filter(el => el.checked).reduce((sum, el) => sum + Number(el.value), 0);
  nomes.value = inputs.filter(el => el.checked).map(el => el.name).join(',');
};

inputs.forEach(x => x.addEventListener("change", calcular));
<input type="checkbox" name="Teclado" value="01" />
<input type="checkbox" name="Mouse" value="02" />
<input type="checkbox" name="Fone" value="03" />
<input type="checkbox" name="Monitor" value="04" />

<div id="resultado">
  <input type="text" name="total" value="seria a soma dos valores">
  <input type="text" name="nomes" value="seria os nomes[] marcados(A,B,C..)">
</div>

A ideia é modificar o .value do input de destino. Repara que para o exemplo usei type="text" mas podes er hidden como tinhas.

Assim, usando o .name com um .filter antes e .join(',') crias a string de nomes; usando um redutor com um .filter antes fazes a soma.

3
  • Entendi, Perfeito! 30/11/2018 às 15:34
  • uma pergunta Sergio, se eu quiser mostrar a soma dos valores fora do input eu poderia ? 30/11/2018 às 16:50
  • 1
    @RonaldodeLima sim, claro. Para isso em vex de total.value usa o elemento que queres e depois .value ou .innerHTML caso seja um input ou outro tipo de elemento
    – Sergio
    1/12/2018 às 20:21

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 .