Sum values of alt attribute by each

Question

I would like to know how to sum the values of the alt attribute.

var valor;
var soma;
$("input[name='opcoes[]']:checked").each(function() {
  if ($("input[name='opcoes[]']").is(":checked")) {
    $('#' + $(this).parent().attr('id') + ' input:text').val($(this).attr('alt'));
    valor += $(this).val() + "\n";
    soma += $(this).attr('alt');
  }
  $('#somaTabelaIE').val(soma);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="D1">1.
  <input name="opcoes[]" class="c Obrig" type="checkbox" checked value="1|Taxa de locação|ENC|15.00|FIX|POR|VLT|%" alt="15.00" title="Taxa de locação" /> <b> Taxa </b>
  <input type="text" value="" class="i">
</div>
<div id="D2">2.
  <input name="opcoes[]" class="c " type="checkbox" checked value="2|GPS|ENC|5.00|DIA|MON|DIA|" alt="5.00" title="GPS" /> GPS
  <input type="text" value="" class="i">
</div>
<div id="D3">3.
  <input name="opcoes[]" class="c " type="checkbox" value="3|Lavagem do carro|ENC|30.00|FIX|MON|VLT|" alt="30.00" title="Lavagem do carro" /> Lavagem
  <input type="text" value="" class="i">
</div>
<div id="D4">4.
  <input name="opcoes[]" class="c " type="checkbox" checked value="4|Translado aéreo retirada|ENC|35.00|FIX|MON|VLT|" alt="35.00" title="Translado aéreo retirada" /> Translado
  <input type="text" value="" class="i">
</div>


<p>===================</p>

<input type="text" class="somaTabelaIE" id="somaTabelaIE" value="0">

Answer 1

Hi James can use a combination of features.
The steps to take are:

• capture the alt value
• convert to number
• add up everything

An example would be like this, which does the math every time an input changes:

var $opcoes = $("input[name='opcoes[]']");
$opcoes.on('change', function() {
  var total = $opcoes.get().reduce(function(soma, input) {
    if (!input.checked) return soma;
    var valor = Number(input.getAttribute('alt'));
    return soma + valor;
  }, 0);
  $('#somaTabelaIE').val(total);
}).change(); // este ultimo change é só para correr o código no inicio

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="D1">1.
  <input name="opcoes[]" class="c Obrig" type="checkbox" checked value="1|Taxa de locação|ENC|15.00|FIX|POR|VLT|%" alt="15.00" title="Taxa de locação" /> <b> Taxa </b>
  <input type="text" value="" class="i">
</div>
<div id="D2">2.
  <input name="opcoes[]" class="c " type="checkbox" checked value="2|GPS|ENC|5.00|DIA|MON|DIA|" alt="5.00" title="GPS" /> GPS
  <input type="text" value="" class="i">
</div>
<div id="D3">3.
  <input name="opcoes[]" class="c " type="checkbox" value="3|Lavagem do carro|ENC|30.00|FIX|MON|VLT|" alt="30.00" title="Lavagem do carro" /> Lavagem
  <input type="text" value="" class="i">
</div>
<div id="D4">4.
  <input name="opcoes[]" class="c " type="checkbox" checked value="4|Translado aéreo retirada|ENC|35.00|FIX|MON|VLT|" alt="35.00" title="Translado aéreo retirada" /> Translado
  <input type="text" value="" class="i">
</div>


<p>===================</p>

<input type="text" class="somaTabelaIE" id="somaTabelaIE" value="0">