Javascript Calculate Portion of a value coming from checkboxs

Asked

Viewed 373 times

0

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

Down with 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>Forma de Pagamento</h4>
    <td><label>Total R$</label></td>
    <td><input type="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 jquery html

  • I don’t know very well where to start. The first question, these parcels you adding in hand? You need to assemble a foreach to assemble the checkboxes and within them add Event list within them.;

  • 1

    Try to mount a repetition loop with the total number of plots it will have: example 45 plots would be for(int i =0; i <= 45; ++i){ your code here}

  • Not the value is only parceled up to 4x, and the total value depends on the amount of checkbox marked each adds the value of R $ 1.455,80 to the total amount that will be parceled. The way the code is I’m showing how much will be the total value for the user according to what he marks and then I ask him to enter the total amount he gave to parcel up to 4x with the form made in the script, the intention was that the user did not need to enter the total, and the form was applied to the value that already appears.

1 answer

1


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>
<div id="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, ".");

the variable var p =... has gone global p =...

  • Exactly that, thank you very much.

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.