1

Eu tenho essa função em javascript, e queria passar ela para jquery. O usuário clica em um botão em html e chama a função para um desconto.`

<script>  
function verifica(){ 
  var preco = 100; 
  var desconto = 0.30; 
  var total; 
  if(document.getElementById('ssbc').checked == true){ 
    total = preco -(preco*desconto);
  }
  if(document.getElementById('ssbc').checked == false){
    total=preco;
  }
  alert("O valor de sua inscrição é: R$ "+total);
}
</script>`
1

2 Respostas 2

1

Com jquery pode ser feito da seguinte forma:

$(document).ready(function () {
   var preco = 100; 
   var desconto = 0.30; 
   var total;

    $("#calculo").on("click", function(){
        if(ssbc.checked) {
            total = preco -(preco*desconto);
        } else {
            total = preco;
        }
        //alert("O valor de sua inscrição é: R$ "+total+",00");
        console.log("O valor de sua inscrição é: R$ "+total+",00");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" name="ssbc" id="ssbc" />
<input type="button" id="calculo" value="Calcular" />

$(document).ready significa que vamos executar a função assim que os elementos html estiverem postos na página.

A linha $("#calculo").on("click", function(){ pode ser substituída por $('#calculo').click(function (){ que também, nesse caso, vai funcionar a contento.

Para saber a diferença entre .on(“click”, function()) e o .click(function()) acesse esse post

1
  • A resposta do @LeoCaracciolo está corretíssima. Commented 27/08/2017 às 0:54
0

Este exemplo é só uma alternativa onde os valores podem ser inseridos pelo usuário.

$('#aplicar').click(function(){
    $('#desconto').slideToggle();
  });

$('#calcular').click(function(){
    if ($("#aplicar:checked").length) {
      $('#total').text("O valor de sua inscrição é: R$ " + parseFloat($('#preco').val() - $('#valDesconto').val()).toFixed(2));
    } else {
      $('#total').text("O valor de sua inscrição é: R$ " + parseFloat($('#preco').val()).toFixed(2));
    }
})
#desconto { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form>
  Preço: <input id="preco" type="number" step="0.01"><br>
  <label for="aplicar">Aplicar desconto</label>
  <input type="checkbox" id="aplicar"><br>
  <div id="desconto">
    Desconto: <input id="valDesconto" type="number" step="0.01" placeholder="Desconto">
  </div>
  <input type="button" id="calcular" value="Calcular">
  <h1 id="total"></h1>
</form>

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 .