Add Checkbox fields in Loop

Question

Add Checkbox fields in Loop

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

As I am not aware of javascript I would like a little help on how I can make this script work within a while and cause it to also add the decimal places outside the loop. It works the most 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><formname="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>

javascript jquery

asked by anonymous 19.06.2017 / 03:07

2 answers

How to get the value of the input hidden inside the controller using FormCollection? I can not echo objects

score 1 · Answer 1

The programming languages use international numbering system, there is no commas is point to be able to do 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><formname="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 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><formname="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 a 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><formname="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

score 1 · Answer 2

I believe this works the way you want, just insert the code below into 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><inputtype="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"/>