1

Tenho o código abaixo, e preciso somar os valores dos checkboxes ao invés de concatená-los. Alguém pode me ajudar?

<!DOCTYPE html>
<html>
  <head>
    <style>
      #out{width:350px;}
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <input type="checkbox" name="dias[]" value="0.5">,5 &nbsp;
    <input type="checkbox" name="dias[]" value="1">1 &nbsp;
    <input type="checkbox" name="dias[]" value="0.25">,25 &nbsp;
    <input type="checkbox" name="dias[]" value="0.45">,45 &nbsp;
    <input type="checkbox" name="dias[]" value="0.5">,5 &nbsp;
    <input type="checkbox" name="dias[]" value="0.75">,75 &nbsp;
    <input type="checkbox" name="dias[]" value="0.8">,8 &nbsp;
    <br>
    <input type="text" name="dias" value="" id="out">
    <script type="text/javascript">
      var inputs = $('input[name="dias[]"]');
      inputs.on('change', function () {
      var str = [];
      var control = 0;
      inputs.each(function () {
        if (this.checked) {
          str.push(this.value);
          control++;
        }
      });

      $('input[name="dias"]').val(str.join(', '));          

      console.log($('input[name="dias"]').val());
      });
    </script>
  </body>
</html>
3
  • 1
    Aonde está o código em php?
    – mercador
    Commented 13/06/2017 às 15:59
  • esta parte do código é um exemplo que eu achei aqui mesmo e adaptei colocando os valores. Os valores vêm do banco, em PHP... são adicionais para lanches (purê de batatas, +queijo, ervilha, milho, etc...), e ao marcar o checkbox, gostaria que somasse o valor dos adicionais ao preço do produto e exibisse na mesma tela, sem dar refresh. Quando clica no botão "enviar pedido", eu consigo fazer a soma e incluir o valor (acrescido com os adicionais) no banco. mas exibir na mesma tela está sendo u problema. Commented 13/06/2017 às 16:14
  • yes, sir! já o fiz, e perdoe a nossa falha! Comecei a pergunta pesando em uma coisa, terminei falando de outra.... Commented 13/06/2017 às 16:49

2 Respostas 2

6

Seria isso que você precisa fazer?

jQuery(function() {
  $(document).ready(function() {
    $(".dias").change(function() {
      var total = $('input[class="dias"]:checked').get().reduce(function(tot, el) {
        return tot + Number(el.value);
      }, 0);
      $('#resultado').val(total);
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" class="dias" name="dias[]" value="0.5">,5 &nbsp;
<input type="checkbox" class="dias" name="dias[]" value="1">1 &nbsp;
<input type="checkbox" class="dias" name="dias[]"  value="0.25">,25 &nbsp;
<input type="checkbox" class="dias" name="dias[]"  value="0.45">,45 &nbsp;
<input type="checkbox" class="dias" name="dias[]"  value="0.5">,5 &nbsp;
<input type="checkbox" class="dias" name="dias[]"  value="0.75">,75 &nbsp;
<input type="checkbox" class="dias" name="dias[]" value="0.8">,8 &nbsp;

<br><br>Resultado<input type="text" id="resultado" value="0">

1
  • 1
    BINGOOOOO!!!!!!!!!!!!!! Muito obrigado!!!!!! Commented 13/06/2017 às 16:29
-2

Com o script abaixo você vai verificar todos os checks marcados, modifique como quiser.

jQuery(document).ready(function(){
  $('input[type=button]').click(function(){
    $("input:checked").each(function() {
      alert(this.value);
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="dias[]" value="0.5">,5 &nbsp;
    <input type="checkbox" name="dias[]" value="1">1 &nbsp;
    <input type="checkbox" name="dias[]" value="0.25">,25 &nbsp;
    <input type="checkbox" name="dias[]" value="0.45">,45 &nbsp;
    <input type="checkbox" name="dias[]" value="0.5">,5 &nbsp;
    <input type="checkbox" name="dias[]" value="0.75">,75 &nbsp;
    <input type="checkbox" name="dias[]" value="0.8">,8 &nbsp;
    <br>
<input type="button" value="Verificar Marcados">

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 .