I need to add checkbox values (additional snacks)

Asked

Viewed 1,314 times

1

I have the code below, and I need to add the values of the checkboxes instead of concatenating them. Can someone help me?

<!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>
javascript
  • 1

    Where is the code in php?

  • this part of the code is an example that I found right here and adapted putting the values. The values come from the bank, in PHP... are additional for snacks (mashed potatoes, +cheese, pea, corn, etc...), and when marking the checkbox, I would like you to add the value of the additional to the price of the product and display on the same screen, without giving refresh. When you click on the "send order" button, I can add the sum and include the value (plus the additional ones) in the bank. but display on the same screen is being a problem.

  • yes, sir! I already did, and forgive our failure! I started the question weighing on one thing, I ended up talking about another....

2 answers

6


That’s what you need to do?

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

    BINGOOOOO!!!!!!!!!!!! Thank you very much!!!!!!

-2

With the script below you will check all checks marked, modify as you want.

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">

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.