1

Nesse meu código a baixo ele faz uma soma entre campos por linha. O que não estou sabendo fazer, é quando ao clicar em um checkbox ele realizar o desconto em porcentagem e no outro checkbox somar uma multa em porcentagem . a baixo segue a imagem como ele esta hoje Como não entendo muito de javascript peço uma ajuda de como fazer isso funcionar

inserir a descrição da imagem aqui

<script>
window.onload=function(){
function getClosest(el, tagName) {
while (el = el.parentNode) {
    if (el.tagName.toLowerCase() == tagName) return el;
}
}

//como nao estamos usando jquery, devemos realizar o loop para cada item    selecionado

var classGas = document.getElementsByClassName("gas");
for(var i=0;i<classGas.length;i++){
classGas[i].addEventListener("keyup", function(e){
    updateValue(e);
});
}

var classIptu = document.getElementsByClassName("iptu");
for(var i=0;i<classIptu.length;i++){
classIptu[i].addEventListener("keyup", function(e){
    updateValue(e);
});
}


var classValor = document.getElementsByClassName("valor");
for(var i=0;i<classValor.length;i++){
classValor[i].addEventListener("keyup", function(e){
    updateValue(e);
});
}

var classRateio = document.getElementsByClassName("rateio");
for(var i=0;i<classRateio.length;i++){
classRateio[i].addEventListener("keyup", function(e){
    updateValue(e);
});
}

var classCb = document.getElementsByClassName("cb");
for(var i=0;i<classCb.length;i++){
classCb[i].addEventListener("keyup", function(e){
    updateValue(e);
});
}

var classMulta = document.getElementsByClassName("multa");
for(var i=0;i<classMulta.length;i++){
classMulta[i].addEventListener("keyup", function(e){
    updateValue(e);
});
}

var classDesconto = document.getElementsByClassName("desconto");
for(var i=0;i<classDesconto.length;i++){
classDesconto[i].addEventListener("keyup", function(e){
    updateValue(e);
});
}

//funcao para atualizar os valores
function updateValue(e){
var total = 0;
var gas = 0;
var valor = 0;
var rateio = 0;
var iptu = 0;
var multa = 0;
var desconto = 0;

// ir buscar o outro valor dentro da mesma linha
var tr = getClosest(e.target, 'tr');
valor = tr.querySelector('input[name="valor[]"]').value;
gas = tr.querySelector('input[name="gas[]"]').value;
rateio = tr.querySelector('input[name="rateio[]"]').value;
cb = tr.querySelector('input[name="cb[]"]').value;
iptu = tr.querySelector('input[name="iptu[]"]').value; 
multa = tr.querySelector('input[name="multa[]"]').value; 
desconto = tr.querySelector('input[name="desconto[]"]').value; 

total = parseFloat(gas) + parseFloat(valor)+ parseFloat(rateio)+   parseFloat(cb)+ parseFloat(iptu)+ parseFloat(multa)+ parseFloat(desconto) ;

function arredondar(total) {
if (total.indexOf(',') != -1) total = total.replace(',', '.');
total = parseFloat(total) * 100;
return Math.floor(total) / 100;
}



tr.querySelector('input[name="total[]"]').value = total;

}

}//]]> 
</script>
<table>
<?php


        $valor1   = '1000,00';
        $iptuf    = '250,00';
        $rateiof  = '300,00';
        $gas      = '50,00';
        $cb       = '50,00';
        $multa    = '2';  //% porcento
        $desconto = '10'; // porcento
        $totalf = '1650,00';

 $i = 1;
 while ($i <= 10) {
 $id_finan = $i++;
 ?>
        <tr>
        <td>
        <input type="text" class="valor" name="valor[]" class="valor" id="<? echo $id_finan?>valor"  value=" <?echo $valor1?>" /></td>
        <td><input type="text" name="iptu[]"         class="iptu"   size="8"   style="height: 20px;"  style="width: 20px; margin: 0 auto;" value="<?echo  $iptuf?>"    id="<?echo $id_finan?>iptu"      /></td>
        <td><input type="text" name="rateio[]"  class="rateio" size="8"   style="height: 20px;"  style="width: 20px; margin: 0 auto;" value="<?echo  $rateiof?>"  id="<?echo $id_finan?>rateiof"   /></td>
        <td><input type="text" name="gas[]"     class="gas"    size="8"  style="height: 20px;"  style="width: 20px; margin: 0 auto;" value="<?echo $gas?>"                 id="<?echo $id_finan?>gas"   /></td>
        <td><input type="text" name="cb[]"      class="cb"     size="8"  style="height: 20px;"  style="width: 20px; margin: 0 auto;" value="<?echo $cb?>"                 id="<?echo $id_finan?>cb"   /></td>
        <td>Multa<input type="checkbox" name="multa[]"    class="multa"    value="<?echo $multa?>"      id="<?echo $id_finan?>multa" />
            Desconto<input type="checkbox" name="desconto[]" class="desconto" value="<?echo $desconto?>"   id="<?echo $id_finan?>desconto" />
        </td>
        <td class="text-center"><input type="text" class="total" size="10" name="total[]" value="<?echo $totalf?>"  /></td>

        </tr>

   <?}?>
   </table>

1 Resposta 1

2

Editado

Vamos la. Bom, dei uma revisada no seu código e entendi melhor como ele funcionalva.

Aqui está o resultado.

<script>
window.onload=function(){
function getClosest(el, tagName) {
while (el = el.parentNode) {
if (el.tagName.toLowerCase() == tagName) return el;
}
}

//como nao estamos usando jquery, devemos realizar o loop para cada item    selecionado

var classGas = document.getElementsByClassName("gas");
for(var i=0;i<classGas.length;i++){
classGas[i].addEventListener("keyup", function(e){
updateValue(e);
});
}

var classIptu = document.getElementsByClassName("iptu");
for(var i=0;i<classIptu.length;i++){
classIptu[i].addEventListener("keyup", function(e){
updateValue(e);
});
}


var classValor = document.getElementsByClassName("valor");
for(var i=0;i<classValor.length;i++){
classValor[i].addEventListener("keyup", function(e){
updateValue(e);
});
}

var classRateio = document.getElementsByClassName("rateio");
for(var i=0;i<classRateio.length;i++){
classRateio[i].addEventListener("keyup", function(e){
updateValue(e);
});
}

var classCb = document.getElementsByClassName("cb");
for(var i=0;i<classCb.length;i++){
classCb[i].addEventListener("keyup", function(e){
updateValue(e);
});
}

var classMulta = document.getElementsByClassName("multa");
for(var i=0;i<classMulta.length;i++){
classMulta[i].addEventListener("change", function(e){
updateValue(e);
});
}

var classDesconto = document.getElementsByClassName("desconto");
for(var i=0;i<classDesconto.length;i++){
classDesconto[i].addEventListener("change", function(e){
updateValue(e);
});
}

//funcao para atualizar os valores
function updateValue(e){
var total = 0.0;
var gas = 0;
var valor = 0;
var rateio = 0;
var iptu = 0;
var multa = 0;
var desconto = 0;

// ir buscar o outro valor dentro da mesma linha
var tr = getClosest(e.target, 'tr');
valor = tr.querySelector('input[name="valor[]"]').value.replace(",", ".");
gas = tr.querySelector('input[name="gas[]"]').value.replace(",", ".");
rateio = tr.querySelector('input[name="rateio[]"]').value.replace(",", ".");
cb = tr.querySelector('input[name="cb[]"]').value.replace(",", ".");
iptu = tr.querySelector('input[name="iptu[]"]').value.replace(",", "."); 
multa = tr.querySelector('input[name="multa[]"]').value.replace(",", "."); 
desconto = tr.querySelector('input[name="desconto[]"]').value.replace(",", "."); 


total = (parseFloat(gas) + parseFloat(valor)+ parseFloat(rateio)+   parseFloat(cb)+ parseFloat(iptu)).toFixed(2);

function arredondar(total) {
if (total.indexOf(',') != -1) total = total.replace(',', '.');
total = parseFloat(total) * 100;
return Math.floor(total) / 100;
}

var aplicarMulta    = tr.querySelector('input[name="multa[]"]').checked,
aplicarDesconto = tr.querySelector('input[name="desconto[]"]').checked,
multa    = tr.querySelector('input[name="multa[]"]').value,
desconto = tr.querySelector('input[name="desconto[]"]').value;

if (aplicarMulta == true) {
var multa = (total * multa) / 100;
total = (parseFloat(total) + parseFloat(multa)).toFixed(2);
}

if (aplicarDesconto == true) {
var desconto = (total * desconto) / 100;
total = (parseFloat(total) - parseFloat(desconto)).toFixed(2);
}


tr.querySelector('input[name="total[]"]').value = total.replace(".", ",");

}

}//]]> 
</script>
<table>
<?php


    $valor1   = '1000,00';
    $iptuf    = '250,00';
    $rateiof  = '300,00';
    $gas      = '50,00';
    $cb       = '50,00';
    $multa    = '2';  //% porcento
    $desconto = '10'; // porcento
    $totalf = '1650,00';

 $i = 1;
 while ($i <= 10) {
 $id_finan = $i++;
 ?>
    <tr>
    <td>
    <input type="text" class="valor" name="valor[]" class="valor" id="<?php  echo $id_finan?>valor"  value=" <?php echo $valor1?>" /></td>
    <td><input type="text" name="iptu[]"         class="iptu"   size="8"   style="height: 20px;"  style="width: 20px; margin: 0 auto;" value="<?php echo  $iptuf?>"    id="<?php echo $id_finan?>iptu"      /></td>
    <td><input type="text" name="rateio[]"  class="rateio" size="8"   style="height: 20px;"  style="width: 20px; margin: 0 auto;" value="<?php echo  $rateiof?>"  id="<?php echo $id_finan?>rateiof"   /></td>
    <td><input type="text" name="gas[]"     class="gas"    size="8"  style="height: 20px;"  style="width: 20px; margin: 0 auto;" value="<?php echo $gas?>"                 id="<?php echo $id_finan?>gas"   /></td>
    <td><input type="text" name="cb[]"      class="cb"     size="8"  style="height: 20px;"  style="width: 20px; margin: 0 auto;" value="<?php echo $cb?>"                 id="<?php echo $id_finan?>cb"   /></td>
    <td>Multa<input type="checkbox" name="multa[]"    class="multa"    value="<?php echo $multa?>"      id="<?php echo $id_finan?>multa" />
        Desconto<input type="checkbox" name="desconto[]" class="desconto" value="<?php echo $desconto?>"   id="<?php echo $id_finan?>desconto" />
    </td>
    <td class="text-center"><input type="text" class="total" size="10" name="total[]" value="<?php echo $totalf?>"  /></td>

    </tr>

<?php }?>
</table>

Explicação

Eu mantive a sua estrutura. Mas mudei os eventos das suas var classMulta e var classDesconto para change.

Também criei duas variaveis de verificação "aplicarMulta" e "aplicarDesconto". onde verifico se os inputs checkbox estão checados.

O resto é só calculo. Revisando o código você vai entender todas as modificações sem problemas! ;)

3
  • Alan Obrigado pela Ajuda, mais agora nesse script não funciona mais os cálculos dos outros campos Commented 28/08/2016 às 19:07
  • Revisei seu código e fiz algumas alterações. Dê uma olhada em como ficou. ;)
    – alan
    Commented 28/08/2016 às 22:01
  • Perfeito agora .. Commented 29/08/2016 às 14:03

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 .