Javascript Calculate Portion of a value coming from checkboxs

Question

Javascript Calculate Portion of a value coming from checkboxs

Navigation

#1 by (1 votes)

1

I have here a code for when checkboxes are selected add a value to a label, and another code for the user to type in an input the total value and select the amount of parcels for the operation to take. My question is as follows, how can I do that instead of the user enter the total value, select only the parcels and the operation is done with the value that is in the label that receives values from the checkboxes?

Below the working code:

Thanks for any help / suggestion.

function check() {
  var basic = 0;
  var add = 0;  

  if(document.getElementById("cl01").checked) {
	add += 1455.80;
  }
  if(document.getElementById("cl02").checked) {
	add += 1455.80;
  }
  if(document.getElementById("cl03").checked) {
	add += 1455.80;
  }
  if(document.getElementById("cl04").checked) {
    add += 1455.80;
  }
  if(document.getElementById("cl05").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl06").checked) {
    add += 1455.80;
  }
  if(document.getElementById("cl07").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl08").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl09").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl10").checked) {     
    add += 1455.80;  
  }
  if(document.getElementById("cl11").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl12").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl13").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl14").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl15").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl16").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl17").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl18").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl19").checked) {
    add += 1455.80; 
  }
  if(document.getElementById("cl20").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl21").checked) {
    add += 1455.80;
  }
  if(document.getElementById("cl22").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl23").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl24").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl25").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl26").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl27").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl28").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl29").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl30").checked) {
    add += 1455.80;  
  }   
  if(document.getElementById("cl31").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl32").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl33").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl34").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl35").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl36").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl37").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl38").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl39").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl40").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl41").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl42").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl43").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl44").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl45").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("trigger").checked) {
    add += 400.00;
  }
    
var p = (basic + add).toFixed(2);
var result = p.toString();
result=result.replace(".", ",");
result = result.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
var price ="R$ " + result; 
document.getElementById('total2').innerHTML = price;  

}

check();

function atualizaValores(){
 
   var valor=$("#n-parcelas").val();

   var geraInputs="";


   var valorParcela=parseFloat($(".total").val()/valor).toFixed(2);
   
  

   {
   geraInputs+="<td> <input type='text' readonly='readonly' name='parcela[]' value='"+valor+"x de R$ "+valorParcela+"'> </td>";
   }


    $("#parcelas").html(geraInputs);
   }

$(document).ready(function(e) {
	$(".total").on('change keyup keydown keypress',function(){

    atualizaValores();

  
  });
	$('#condicao-pag').on('change', 'select', function() {

  atualizaValores();
		if($(this).val() == 1){
			$('#parcelamento').show();

			$('#parcelas').show();
		}
		else{
			$('#parcelamento').hide();
			$('#parcelas').hide();
			$("input[name='parcela[]']").val('');
		}
	})
		  
	$('#n-parcelas').on('change', function() {
	
  atualizaValores();
	});
	
  
  
	});

<div id="class">
<form id="form2">
<input type="checkbox" name="f_check2" value="Selecionado" id="trigger" onchange="check()">Logotipo (R$ 400,00)<br><br>
<h3>CheckBoxs</h3>
<input type="checkbox" name="f_classe01" value="Classe 01" id="cl01" onchange="check()">01
<input type="checkbox" name="f_classe02" value="Classe 02" id="cl02" onchange="check()">02
<input type="checkbox" name="f_classe03" value="Classe 03" id="cl03" onchange="check()">03
<input type="checkbox" name="f_classe04" value="Classe 04" id="cl04" onchange="check()">04
<input type="checkbox" name="f_classe05" value="Classe 05" id="cl05" onchange="check()">05
<input type="checkbox" name="f_classe06" value="Classe 06" id="cl06" onchange="check()">06
<input type="checkbox" name="f_classe07" value="Classe 07" id="cl07" onchange="check()">07
<input type="checkbox" name="f_classe08" value="Classe 08" id="cl08" onchange="check()">08 
<input type="checkbox" name="f_classe09" value="Classe 09" id="cl09" onchange="check()">09
<input type="checkbox" name="f_classe10" value="Classe 10" id="cl10" onchange="check()">10
<input type="checkbox" name="f_classe11" value="Classe 11" id="cl11" onchange="check()">11
<input type="checkbox" name="f_classe12" value="Classe 12" id="cl12" onchange="check()">12
<input type="checkbox" name="f_classe13" value="Classe 13" id="cl13" onchange="check()">13
<input type="checkbox" name="f_classe14" value="Classe 14" id="cl14" onchange="check()">14
<input type="checkbox" name="f_classe15" value="Classe 15" id="cl15" onchange="check()">15
<input type="checkbox" name="f_classe16" value="Classe 16" id="cl16" onchange="check()">16 
<input type="checkbox" name="f_classe17" value="Classe 17" id="cl17" onchange="check()">17
<input type="checkbox" name="f_classe18" value="Classe 18" id="cl18" onchange="check()">18
<input type="checkbox" name="f_classe19" value="Classe 19" id="cl19" onchange="check()">19
<input type="checkbox" name="f_classe20" value="Classe 20" id="cl20" onchange="check()">20
<input type="checkbox" name="f_classe21" value="Classe 21" id="cl21" onchange="check()">21
<input type="checkbox" name="f_classe22" value="Classe 22" id="cl22" onchange="check()">22
<input type="checkbox" name="f_classe23" value="Classe 23" id="cl23" onchange="check()">23
<input type="checkbox" name="f_classe24" value="Classe 24" id="cl24" onchange="check()">24 
<input type="checkbox" name="f_classe25" value="Classe 25" id="cl25" onchange="check()">25
<input type="checkbox" name="f_classe26" value="Classe 26" id="cl26" onchange="check()">26
<input type="checkbox" name="f_classe27" value="Classe 27" id="cl27" onchange="check()">27
<input type="checkbox" name="f_classe28" value="Classe 28" id="cl28" onchange="check()">28
<input type="checkbox" name="f_classe29" value="Classe 29" id="cl29" onchange="check()">29
<input type="checkbox" name="f_classe30" value="Classe 30" id="cl30" onchange="check()">30
<input type="checkbox" name="f_classe31" value="Classe 31" id="cl31" onchange="check()">31
<input type="checkbox" name="f_classe32" value="Classe 32" id="cl32" onchange="check()">32 
<input type="checkbox" name="f_classe33" value="Classe 33" id="cl33" onchange="check()">33
<input type="checkbox" name="f_classe34" value="Classe 34" id="cl34" onchange="check()">34
<input type="checkbox" name="f_classe35" value="Classe 35" id="cl35" onchange="check()">35
<input type="checkbox" name="f_classe36" value="Classe 36" id="cl36" onchange="check()">36
<input type="checkbox" name="f_classe37" value="Classe 37" id="cl37" onchange="check()">37
<input type="checkbox" name="f_classe38" value="Classe 38" id="cl38" onchange="check()">38
<input type="checkbox" name="f_classe39" value="Classe 39" id="cl39" onchange="check()">39
<input type="checkbox" name="f_classe40" value="Classe 40" id="cl40" onchange="check()">40 
<input type="checkbox" name="f_classe41" value="Classe 41" id="cl41" onchange="check()">41
<input type="checkbox" name="f_classe42" value="Classe 42" id="cl42" onchange="check()">42
<input type="checkbox" name="f_classe43" value="Classe 43" id="cl43" onchange="check()">43
<input type="checkbox" name="f_classe44" value="Classe 44" id="cl44" onchange="check()">44
<input type="checkbox" name="f_classe45" value="Classe 45" id="cl45" onchange="check()">45
<br><br>
<label style="width: 100px;">Valor Total:</label> <label id="total2"></label><br><br>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><tbody><tr><h4>FormadePagamento</h4><td><label>TotalR$</label></td><td><inputtype="number"  class="total" /></td>
</tr>
<tr name="condicao-pag" id="condicao-pag">
    <td><label>Condição de pagamento:</label></td>
    <td>
        <select/>
            <option value=0>À vista</option>
            <option value=1>Parcelado</option>
        </select>
    </td>
</tr>
<tr id="parcelamento" style="display:none"> 
    <td>Parcelas:</td>
    <td>
        <select id="n-parcelas">
            <option></option>
            <option value="2" selected>2x</option>
            <option value="3">3x</option>
            <option value="4">4x</option>
        </select>
    </td>
</tr>

<tr id="parcelas" style="display:none">

  
</tr>
</tbody>
</table>

javascript html jquery

asked by anonymous 15.09.2017 / 14:14

1 answer

Index and length should refer to a location within the sequence Hide Div in IOS

score 1 · Accepted Answer

function check() {
  var basic = 0;
  var add = 0;  

  if(document.getElementById("cl01").checked) {
	add += 1455.80;
  }
  if(document.getElementById("cl02").checked) {
	add += 1455.80;
  }
  if(document.getElementById("cl03").checked) {
	add += 1455.80;
  }
  if(document.getElementById("cl04").checked) {
    add += 1455.80;
  }
  if(document.getElementById("cl05").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl06").checked) {
    add += 1455.80;
  }
  if(document.getElementById("cl07").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl08").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl09").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl10").checked) {     
    add += 1455.80;  
  }
  if(document.getElementById("cl11").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl12").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl13").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl14").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl15").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl16").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl17").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl18").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl19").checked) {
    add += 1455.80; 
  }
  if(document.getElementById("cl20").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl21").checked) {
    add += 1455.80;
  }
  if(document.getElementById("cl22").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl23").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl24").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl25").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl26").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl27").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl28").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl29").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl30").checked) {
    add += 1455.80;  
  }   
  if(document.getElementById("cl31").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl32").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl33").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl34").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl35").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl36").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl37").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl38").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl39").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl40").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl41").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl42").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl43").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl44").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("cl45").checked) {
    add += 1455.80;  
  }
  if(document.getElementById("trigger").checked) {
    add += 400.00;
  }
    
p = (basic + add).toFixed(2);
var result = p.toString();
result=result.replace(".", ",");
result = result.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
var price ="R$ " + result; 
document.getElementById('total2').innerHTML = price; 
document.getElementById('showTotal').value = price;

}

check();

function atualizaValores(){
 
   var valor=$("#n-parcelas").val();

   var geraInputs="";


   var valorParcela=(p/valor).toFixed(2);
   
   valorParcela = valorParcela.toString();
	valorParcela=valorParcela.replace(".", ",");
	valorParcela = valorParcela.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
   
  

   {
   geraInputs+="<td> <input type='text' readonly='readonly' name='parcela[]' value='"+valor+"x de R$ "+valorParcela+"'> </td>";
   }


    $("#parcelas").html(geraInputs);
   }

$(document).ready(function(e) {
	$(".total").on('change keyup keydown keypress',function(){

    atualizaValores();

  
  });
	$('#condicao-pag').on('change', 'select', function() {

  atualizaValores();
		if($(this).val() == 1){
			$('#parcelamento').show();

			$('#parcelas').show();
		}
		else{
			$('#parcelamento').hide();
			$('#parcelas').hide();
			$("input[name='parcela[]']").val('');
		}
	})
		  
	$('#n-parcelas').on('change', function() {
	
  atualizaValores();
	});
	
  
  
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="class">
<form id="form2">
<input type="checkbox" name="f_check2" value="Selecionado" id="trigger" onclick="check()">Logotipo (R$ 400,00)<br><br>
<h3>CheckBoxs</h3>
<input type="checkbox" name="f_classe01" value="Classe 01" id="cl01" onclick="check()">01
<input type="checkbox" name="f_classe02" value="Classe 02" id="cl02" onclick="check()">02
<input type="checkbox" name="f_classe03" value="Classe 03" id="cl03" onclick="check()">03
<input type="checkbox" name="f_classe04" value="Classe 04" id="cl04" onclick="check()">04
<input type="checkbox" name="f_classe05" value="Classe 05" id="cl05" onclick="check()">05
<input type="checkbox" name="f_classe06" value="Classe 06" id="cl06" onclick="check()">06
<input type="checkbox" name="f_classe07" value="Classe 07" id="cl07" onclick="check()">07
<input type="checkbox" name="f_classe08" value="Classe 08" id="cl08" onclick="check()">08 
<input type="checkbox" name="f_classe09" value="Classe 09" id="cl09" onclick="check()">09
<input type="checkbox" name="f_classe10" value="Classe 10" id="cl10" onclick="check()">10
<input type="checkbox" name="f_classe11" value="Classe 11" id="cl11" onclick="check()">11
<input type="checkbox" name="f_classe12" value="Classe 12" id="cl12" onclick="check()">12
<input type="checkbox" name="f_classe13" value="Classe 13" id="cl13" onclick="check()">13
<input type="checkbox" name="f_classe14" value="Classe 14" id="cl14" onclick="check()">14
<input type="checkbox" name="f_classe15" value="Classe 15" id="cl15" onclick="check()">15
<input type="checkbox" name="f_classe16" value="Classe 16" id="cl16" onclick="check()">16 
<input type="checkbox" name="f_classe17" value="Classe 17" id="cl17" onclick="check()">17
<input type="checkbox" name="f_classe18" value="Classe 18" id="cl18" onclick="check()">18
<input type="checkbox" name="f_classe19" value="Classe 19" id="cl19" onclick="check()">19
<input type="checkbox" name="f_classe20" value="Classe 20" id="cl20" onclick="check()">20
<input type="checkbox" name="f_classe21" value="Classe 21" id="cl21" onclick="check()">21
<input type="checkbox" name="f_classe22" value="Classe 22" id="cl22" onclick="check()">22
<input type="checkbox" name="f_classe23" value="Classe 23" id="cl23" onclick="check()">23
<input type="checkbox" name="f_classe24" value="Classe 24" id="cl24" onclick="check()">24 
<input type="checkbox" name="f_classe25" value="Classe 25" id="cl25" onclick="check()">25
<input type="checkbox" name="f_classe26" value="Classe 26" id="cl26" onclick="check()">26
<input type="checkbox" name="f_classe27" value="Classe 27" id="cl27" onclick="check()">27
<input type="checkbox" name="f_classe28" value="Classe 28" id="cl28" onclick="check()">28
<input type="checkbox" name="f_classe29" value="Classe 29" id="cl29" onclick="check()">29
<input type="checkbox" name="f_classe30" value="Classe 30" id="cl30" onclick="check()">30
<input type="checkbox" name="f_classe31" value="Classe 31" id="cl31" onclick="check()">31
<input type="checkbox" name="f_classe32" value="Classe 32" id="cl32" onclick="check()">32 
<input type="checkbox" name="f_classe33" value="Classe 33" id="cl33" onclick="check()">33
<input type="checkbox" name="f_classe34" value="Classe 34" id="cl34" onclick="check()">34
<input type="checkbox" name="f_classe35" value="Classe 35" id="cl35" onclick="check()">35
<input type="checkbox" name="f_classe36" value="Classe 36" id="cl36" onclick="check()">36
<input type="checkbox" name="f_classe37" value="Classe 37" id="cl37" onclick="check()">37
<input type="checkbox" name="f_classe38" value="Classe 38" id="cl38" onclick="check()">38
<input type="checkbox" name="f_classe39" value="Classe 39" id="cl39" onclick="check()">39
<input type="checkbox" name="f_classe40" value="Classe 40" id="cl40" onclick="check()">40 
<input type="checkbox" name="f_classe41" value="Classe 41" id="cl41" onclick="check()">41
<input type="checkbox" name="f_classe42" value="Classe 42" id="cl42" onclick="check()">42
<input type="checkbox" name="f_classe43" value="Classe 43" id="cl43" onclick="check()">43
<input type="checkbox" name="f_classe44" value="Classe 44" id="cl44" onclick="check()">44
<input type="checkbox" name="f_classe45" value="Classe 45" id="cl45" onclick="check()">45
<br><br>
<label style="width: 100px;">Valor Total:</label> <label id="total2"></label><br><br>

</div>


<table>
<tbody>
<tr>
<h4>Forma de Pagamento</h4>
    <td><label>Total R$</label></td>
    <td><input id="showTotal" type="text"  class="total" /></td>
</tr>
<tr name="condicao-pag" id="condicao-pag">
    <td><label>Condição de pagamento:</label></td>
    <td>
        <select/>
            <option value=0>À vista</option>
            <option value=1>Parcelado</option>
        </select>
    </td>
</tr>
<tr id="parcelamento" style="display:none"> 
    <td>Parcelas:</td>
    <td>
        <select id="n-parcelas">
            <option></option>
            <option value="2" selected>2x</option>
            <option value="3">3x</option>
            <option value="4">4x</option>
        </select>
    </td>
</tr>

<tr id="parcelas" style="display:none">

  
</tr>
</tbody>


</table>

Changes made to the code

document.getElementById('showTotal').value = price;

<td><input id="showTotal" type="text" class="total" />


var valorParcela=(p/valor).toFixed(2);

valorParcela = valorParcela.toString();
valorParcela=valorParcela.replace(".", ",");
valorParcela = valorParcela.replace(/\B(?=(\d{3})+(?!\d))/g, ".");

variable var p =... turned global p =...