0

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

inputs.forEach(x => x.addEventListener("change", () => {	
  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(',');
}));

const inputsp = [...document.querySelectorAll("input[class='prod']")];
const res = document.getElementById("resultadop");
const totalp = res.querySelector('[name="totalp"]');
const nomesp = res.querySelector('[name="nomesp"]');

inputsp.forEach(x => x.addEventListener("change", () => {	
  totalp.value = inputsp.filter(el => el.checked).reduce((sum, el) => sum + Number(el.value), 0);
  nomesp.value = inputsp.filter(el => el.checked).map(el => el.name).join(',');
}));
<div id="resultado">
  <input type="text" name="total" value="">
  <input type="hidden" name="nomes" value="">
</div>
<input type=checkbox class='serv' name="serviço 1" value="1">
<input type=checkbox class='serv' name="serviço 2" value="2">
<input type=checkbox class='serv' name="serviço 3" value="3">

<div id="resultadop">
  <input type="text" name="totalp" value="">
  <input type="hidden" name="nomesp" value="">
</div>
<input type=checkbox class='prod' name="Produto 1" value="1">
<input type=checkbox class='prod' name="Produto 2" value="2">
<input type=checkbox class='prod' name="Produto 3" value="3">

me deparei com uma questão, estou tentando usar o mesmo código na mesma pagina fazendo as alterações para produtos. alguém sabe dizer porque está dando conflito mesmo tento feito as alterações ?

1
  • você ja tem uma div especifica pra isso ?
    – Risk
    Commented 1/12/2018 às 5:05

2 Respostas 2

2

Aparentemente você esta re-declarando a constante res

const res = document.getElementById("resultadop");

após mudar ela não esqueça de mudar res nessas linhas também

const totalp = res.querySelector('[name="totalp"]');
const nomesp = res.querySelector('[name="nomesp"]');

Fazendo as alterações deve ficar +/- assim:

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

inputs.forEach(x => x.addEventListener("change", () => {	
  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(',');
}));

const inputsp = [...document.querySelectorAll("input[class='prod']")];
const resp = document.getElementById("resultadop");   // alterado res => resp
const totalp = resp.querySelector('[name="totalp"]'); // alterado res => resp
const nomesp = resp.querySelector('[name="nomesp"]'); // alterado res => resp

inputsp.forEach(x => x.addEventListener("change", () => {	
  totalp.value = inputsp.filter(el => el.checked).reduce((sum, el) => sum + Number(el.value), 0);
  nomesp.value = inputsp.filter(el => el.checked).map(el => el.name).join(',');
}));
<div id="resultado">
  <input type="text" name="total" value="">
  <input type="hidden" name="nomes" value="">
</div>
<input type=checkbox class='serv' name="serviço 1" value="1">
<input type=checkbox class='serv' name="serviço 2" value="2">
<input type=checkbox class='serv' name="serviço 3" value="3">

<div id="resultadop">
  <input type="text" name="totalp" value="">
  <input type="hidden" name="nomesp" value="">
</div>
<input type=checkbox class='prod' name="Produto 1" value="1">
<input type=checkbox class='prod' name="Produto 2" value="2">
<input type=checkbox class='prod' name="Produto 3" value="3">

4
  • 1
    Nossa, Funcionou perfeitamente Commented 1/12/2018 às 5:10
  • Pode me tirar uma dúvida? teria como somar as duas inputs que recebem os totais? se sim o problema que eu vejo é que meu form(usado pra salvar esses dados no bd) está entre as divs de Serviços e Produtos. Commented 1/12/2018 às 5:15
  • @RonaldodeLima Para somar as input.total e input.totalp primeiro você tem que transformar o valor para um tipo numérico como int ou float. Como nesse exemplo var soma = parseInt( totalp.value ) + parseInt( total.value ). Agora o problema relatado do form eu não entendi, talvez seja melhor você criar uma nova pergunta explicando-o. Commented 1/12/2018 às 13:56
  • Consegui resolver ambos, Obrigado @icaroMartins, porém preciso de mais uma ajudinha, preciso pegar mais um dado referente a cada produto mas o "value" do input já está sendo usado, Além do "name" e "value" preciso do valor das comissões. Pensei em acrescentar outro input type=hidden com o "value='comisssao'" porém como vincular cada um a seu respectivo produto quando a checkbox vor marcada? Commented 3/12/2018 às 3:37
1

$(document).ready(function(){
$('#id_checbox1').on('change', function() {
var ckb=this.checked;
if (ckb ==true){
$('#MPS').prepend(this.value);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="id_checbox1" type=checkbox class='prod' name="Produto1" value="1">

<div id="MPS"><div>

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 .