I need to add checkbox values (additional snacks)

Question

I need to add checkbox values (additional snacks)

Navigation

#1 by (3 votes)
#2 by (-1 votes)

0

I have the following code, and I need to add the values of the checkboxes instead of concatenating them. Can anyone 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><inputtype="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

asked by anonymous 13.06.2017 / 17:54

2 answers

-1

With the script below you will check all checked checks, modify as you like.

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

13.06.2017 / 18:30

Grouping a set of measures in PHP Check triggers linked to a given table

score 3 · Accepted Answer

Is this 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><inputtype="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">