0

Tenho aqui um código para quando checkboxs forem selecionadas acrescente um valor a uma label, e outro código para o usuário digitar em um input o valor total e selecionar a quantidade de parcelas para que seja feita a operação. A minha dúvida é a seguinte, como posso fazer para que ao em vez de o usuário digitar o valor total, selecionar apenas as parcelas e a operação seja feita com o valor que está na label que recebe valores das checkboxs?

Abaixo o código funcionando:

Agradeço qualquer ajuda/sugestão.

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>

3
  • Não sei muito bem por onde começar. A primeira pergunta, essas parcelas vocês adicionando na mão? Você precisa montar um foreach para montar os checkbox e dentro deles adicionar event list dentro deles.; Commented 15/09/2017 às 13:58
  • 1
    Tenta montar um laço de repetição com o total de parcelas que vai ter: exemplo 45 parcelas ficaria for(int i =0; i <= 45; ++i){ seu código aqui} Commented 15/09/2017 às 14:01
  • Não o valor só é parcelado até 4x, e o valor total depende da quantidade de checkbox marcadas cada uma adiciona o valor de R$ 1.455,80 ao valor total que será parcelado. Da forma que está o código estou mostrando quanto será o valor total para o usuário de acordo com o que ele marcar e depois peço para ele digitar o valor total que deu para parcelar até 4x com a formulá feita no script, a intenção era que não tivesse a necessidade do usuário digitar o total, e a formulá fosse aplicada no valor que já aparece.
    – HBretone
    Commented 15/09/2017 às 15:17

1 Resposta 1

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>

Alterações feitas no codigo

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

a variavel var p =... virou global p =...

1
  • Exatamente isso, muito obrigado.
    – HBretone
    Commented 15/09/2017 às 15:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .