0

Preciso de um JavaScript que ao clicar em um checkbox soma determinado à um total já existente em outro input. E quando desabilita o checkbox subtrai-se o valor do checkbox deste total.

Tenho o seguinte:

<input type="checkbox" id="evento_value" value="99.00" onclick="AddValor()">
<input type="checkbox" id="evento_value" value="120.00" onclick="AddValor()"> 
<input type="checkbox" id="evento_value" value="99.00" onclick="AddValor()">
<input type="checkbox" id="evento_value" value="300.00" onclick="AddValor()">
<input type="checkbox" id="evento_value" value="5.00" onclick="AddValor()">

E também tenho um input com um valor já estabelecido, onde deve ser acrescido os valores do clicar em cada checkbox. Se eventualmente o usuário desabilitar o checkbox, subtrai-se o valor. Estou sando o seguinte código para isso:

<script>
function AddValor() {
  var resultado = parseInt(document.getElementById('evento_value').value, 10);
  var total = parseInt(document.getElementById('valor_principal').value, 10);

  if(document.getElementById('evento_value').checked == true) {
    total = total +resultado;
  } else if(document.getElementById('evento_value').checked == false) {
    total = total - resultado;
  }

  $("#valor_principal").val(total);
}

AddValor();

Onde #valor_principal é o input com o valor já calculado no qual deve-se acrescentar ou subtrair determinado valor ao clicar no checkbox.

O fato é que este script só funciona para o primeiro input checkbox e não para os demais. Desconfio que tenha relação com os IDs. Alguém teria alguma sugestão?

4
  • 3
    É, pra começar não é permitido ter mais de um elemento com o mesmo ID na página.
    – bfavaretto
    13/03/2017 às 21:12
  • Melhor usar class? 13/03/2017 às 21:13
  • Ou então criar um nome significativo (e único) para cada checkbox. 13/03/2017 às 21:15
  • Mas aí como fazer como ele reconheça diversos IDs? Até consigo colocar baseado no ID. 13/03/2017 às 21:16

2 Respostas 2

1

Segue um exemplo usando JQuery.

var total = 0;
//Chama a função com click em qualquer checkbox
$(':checkbox').click(function() {
  //Atribui o valor do input p/ variável 'valor'
  var valor = parseInt($(this).val());
  //Se o checkbox for marcado ele soma se não subtrai
  if ($(this).is(":checked")) {
    total += valor;
  } else {
    total -= valor;
  }
 //Atribui o valor ao input
  $("#evento_value").val(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="evento_value1" value="99.00">
<input type="checkbox" id="evento_value2" value="120.00">
<input type="checkbox" id="evento_value3" value="99.00">
<input type="checkbox" id="evento_value4" value="300.00">
<input type="checkbox" id="evento_value5" value="5.00">

<input type="text" id="evento_value" onclick="AddValor()">

2
  • 1
    Eu preferiria usar $(':checkbox').click(function() { e não $('input').click(function() {, para evitar comportamentos inesperados no caso do formulário possuir outros inputs. 13/03/2017 às 21:26
  • 1
    @MarcellAlves com certeza, é sempre bom evitar, corrigido.
    – Mathiasfc
    13/03/2017 às 21:30
1

Com javascript, pra evitar redundância de código é possível inserir um evento em todos os checkbox, algo mais ou menos como:

var inputs = document.querySelectorAll('input[type="checkbox"]');
for (let i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('click', AddValor);
}

function AddValor() {
  var resultado = parseFloat(this.value, 10);
  var principal = document.getElementById('valor_principal');
  var total = parseFloat(principal.value, 10);

  this.checked == true ? total += resultado : total -= resultado;

  principal.value = total;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="evento_value1" value="99.00">
<input type="checkbox" id="evento_value2" value="120.00">
<input type="checkbox" id="evento_value3" value="99.00">
<input type="checkbox" id="evento_value4" value="300.00">
<input type="checkbox" id="evento_value5" value="5.00">

<input id="valor_principal" value="100">

6
  • Obrigado Lucas Costa... 14/03/2017 às 18:38
  • Só tenho mais 2 probleminhas. Você pode me ajudar? Essa série de inputs abrem automaticamente após eu selecionar uma opção em um select. Ou seja, seleciono uma opção em um select, ele traz as informações condizentes à opção e dentro delas há essa série de inputs. O fato é que se coloco este código dessa forma não funciona, mas se coloco direto na página, aí funciona... Tem ideia do que pode ser? 14/03/2017 às 18:40
  • O outro problema é que esse valor precisa ser atualizado em alguns inputs, ou seja, teria vários <input id="valor_principal" value="100"> para serem atualizados. É possível fazer isso? Ou seja, ao clicar no checkbox ele atualiza todos os campos inputs? 14/03/2017 às 18:41
  • É possível sim, para as duas dúvidas @RafaelSchafferGimenes. No caso da primeira, não entendi tão bem quanto ao funcionar dentro da página. Se você quer dizer que dentro de um .js separado não funciona, talvez o .js não esteja sendo carregado ou esse código está sendo executado no carregamento, o ideal seria executar no evento change do select, entente?!
    – BrTkCa
    14/03/2017 às 19:06
  • No segundo caso, o id de cada elemento deve ser único, não pode se repetir. Portanto você terá que usar outro seletor, como uma classe por exemplo. Se ainda não conseguir, crie um JSFiddle mostrando até onde conseguiu que eu te ajudo =]
    – BrTkCa
    14/03/2017 às 19:08

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 .