Add Checkbox fields to the Loop

Question

As I have no knowledge of javascript I would like a little help on how I can make this low script work inside a while and make that add also the decimals outside the loop it works more inside the bug how to fix this

     while ($row = $retorno->fetch_assoc()) {   } // O codigo ficaria aqui dentro

$(function(){
	total = document.getElementById('total');
	$(document.getElementsByName('choice')).bind('click',function(){
		var valTotal = parseInt(total.value),valInput = parseInt(this.value),novoTotal=0;
		total.value = (this.checked) ? ( valTotal + valInput ) : ( valTotal - valInput ) ;
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form name="listForm" id="listForm">
 <input type="checkbox" name="choice" value="2,55" />2,55<br/>
 <input type="checkbox" name="choice" value="2,00" />2,00<br/>
 <input type="text" size="2" name="total" id="total" value="100,00"/>
</form>

Answer 1

I believe it works like this, just insert the code below inside the while `.

$(document).ready(function() {
    $(".valores").change(function() {
        var total = 100.00;
        total += $('input[class="valores"]:checked').get().reduce(function(tot, el) {
            return tot + Number(el.value);
        }, 0);
        $('#total').val(total);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" class="valores" name="choice" value="2.55" />2,55<br/>
<input type="checkbox" class="valores" name="choice" value="2.00" />2,00<br/>

<br><br>Resultado<input type="text" size="2" name="total" id="total" value="100,00"/>

Answer 2

Programming languages use international numbering system, no commas is a point to be able to perform mathematical operations

Without running away from your code, just formatting the numbers to be able to do mathematical operations.

$(function(){
	total = document.getElementById('total');
	$(document.getElementsByName('choice')).bind('click',function(){
	
		var valTotal = total.value;
		
		valTotal = parseFloat(valTotal.replace(',','.'));
		
		var valInput = (this.value);
		
		valInput = parseFloat(valInput.replace(',','.'));
		
		var novoTotal=0;
		total.value = (this.checked) ? parseFloat(( valTotal + valInput )) : parseFloat(( valTotal - valInput )) ;
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


<form name="listForm" id="listForm">
 <input type="checkbox" name="choice" value="2,55" />2,55<br/>
 <input type="checkbox" name="choice" value="2,00" />2,00<br/>
 <input type="text" size="6" name="total" id="total" value="100,00"/>
</form>

If you want the total to always have 2 decimal places in total.value use the function toFixed

$(function(){
	total = document.getElementById('total');
	$(document.getElementsByName('choice')).bind('click',function(){
	
		var valTotal = total.value;
		
		valTotal = parseFloat(valTotal.replace(',','.'));
		
		var valInput = (this.value);
		
		valInput = parseFloat(valInput.replace(',','.'));
		
		var novoTotal=0;
		total.value = (this.checked) ? parseFloat(( valTotal + valInput )).toFixed(2) : parseFloat(( valTotal - valInput )).toFixed(2) ;
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


<form name="listForm" id="listForm">
 <input type="checkbox" name="choice" value="2,55" />2,55<br/>
 <input type="checkbox" name="choice" value="2,45" />2,45<br/>
 <input type="checkbox" name="choice" value="2,50" />2,50<br/>
 <input type="checkbox" name="choice" value="2,00" />2,00<br/>
 <input type="text" size="4" name="total" id="total" value="100,00"/>
</form>

To return the total with comma.

$(function() {
  total = document.getElementById('total');
  $(document.getElementsByName('choice')).bind('click', function() {

    var valTotal = total.value;

    valTotal = parseFloat(valTotal.replace(',', '.'));

    var valInput = (this.value);

    valInput = parseFloat(valInput.replace(',', '.'));

    var novoTotal = 0;
    var value = (this.checked) ? parseFloat((valTotal + valInput)).toFixed(2) : parseFloat((valTotal - valInput)).toFixed(2);
    total.value = value.replace('.', ',');
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


<form name="listForm" id="listForm">
  <input type="checkbox" name="choice" value="2,55" />2,55<br/>
  <input type="checkbox" name="choice" value="2,45" />2,45<br/>
  <input type="checkbox" name="choice" value="2,50" />2,50<br/>
  <input type="checkbox" name="choice" value="2,00" />2,00<br/>
  <input type="text" size="4" name="total" id="total" value="100,00" />
</form>

DOCS:

replace

parseFloat