Tiago
Reputation: 851
Load checked checkbox and calculate them
I need to make that by changing the dataFim field or clicking on the radio button Arrival it is recalculated the RATES AND SERVICES.
See my code below. In this other link of the to see better all the field: https://jsfiddle.net/yormgb5j/1/
Thank you very much.
$(document).ready(function() {
var data = new Date();
var dia = ("0" + data.getDate()).slice(-2);
var mes = ("0" + (data.getMonth() + 1)).slice(-2);
var ano4 = data.getFullYear();
var hora = ("0" + data.getHours()).slice(-2);
var min = ("0" + data.getMinutes()).slice(-2);
var str_data = dia + '/' + mes + '/' + ano4;
var str_hora = hora + ':' + min;
$("input[name=situacao]").on('change', function() {
if ($(this).val() == "S") {
$("#data_ini").attr("readonly", true);
$("#data_ini").attr("disabled", true);
$('#tab-kmUsado').hide();
} else if ($(this).val() == "C") {
$("#data_fim").attr("readonly", true);
$("#data_fim").attr("disabled", true);
$("#situacao_saida").attr("disabled", false);
$("#data_fim").val(str_data + " " + str_hora);
$("#tab_cliente").mouseover();
$('#tab-avisoKmUsado').hide();
$('#tab-kmUsado').show();
if ($("#selectPlano").val() == "KL") {
$("#planoDia").html($("#dias").val());
$("#planoValor").html($("#valor_dia_kmlivre").val());
planoTotal = $("#dias").val() * $("#valor_dia_kmlivre").val();
$("#planoTotal").html(planoTotal.toFixed(2));
$(".planoTotal").val(planoTotal.toFixed(2));
}
if ($("#selectPlano").val() == "KMC") {
$("#planoDia").html($("#dias").val());
$("#planoValor").html($("#valor_diaria_controlada").val());
planoTotal = $("#dias").val() * $("#valor_diaria_controlada").val();
$("#planoTotal").html(planoTotal.toFixed(2));
$(".planoTotal").val(planoTotal.toFixed(2));
}
if ($("#selectPlano").val() == "DI") {
$("#planoDia").html($("#dias").val());
$("#planoValor").html($("#valor_diaria").val());
planoTotal = $("#dias").val() * $("#valor_diaria").val();
$("#planoTotal").html(planoTotal.toFixed(2));
$(".planoTotal").val(planoTotal.toFixed(2));
}
if ($("input[type=radio][name='seguroCarro']:checked").val() == "S") {
$("#SegCarroS2").html($("#dias").val());
$("#SegCarroS3").html($("#val_seguro_carro").val());
seguroV = $("#dias").val() * $("#val_seguro_carro").val();
$("#SegCarroS4").html(seguroV.toFixed(2));
$(".SegCarroS4").val(seguroV.toFixed(2));
} else {
$("#SegCarroS2").html("0");
$("#SegCarroS3").html("0");
$("#SegCarroS4").html("0.00");
$(".SegCarroS4").val("0.00");
}
if ($("input[type=radio][name='seguroTerceiros']:checked").val() == "S") {
$("#SegTerceirosT2").html($("#dias").val());
$("#SegTerceirosT3").html($("#val_seguro_terceiros").val());
seguroT = $("#dias").val() * $("#val_seguro_terceiros").val();
$("#SegTerceirosT4").html(seguroT.toFixed(2));
$(".SegTerceirosT4").val(seguroT.toFixed(2));
} else {
$("#SegTerceirosT2").html("0");
$("#SegTerceirosT3").html("0");
$("#SegTerceirosT4").html("0.00");
$(".SegTerceirosT4").val("0.00");
}
$(".recalcula").click();
} else {
}
}).parent().find("input[name=situacao]:checked").change();
$("#tab_cliente").on('mouseover', function() {
DAY = 1000 * 60 * 60 * 24;
var data_ini = $("#data_ini").val().toString().split('/');
data_ini2 = data_ini[1] + "/" + data_ini[0] + "/" + data_ini[2];
d1 = new Date(data_ini2);
var data_fim = $("#data_fim").val().toString().split('/');
data_fim2 = data_fim[1] + "/" + data_fim[0] + "/" + data_fim[2];
d2 = new Date(data_fim2);
$("#data_ini2").val($("#data_ini").val());
var diasLocacao = Math.round((d2.getTime() - d1.getTime()) / DAY);
$("#dias").val(diasLocacao);
}).mouseover();
$(".c").on('change', function() {
var values = $(this).val().split('|');
if ($(this).prop('checked')) {
var quantity = $("table[id^=tabelaIE]").length;
$(this).data('qty', quantity);
var table = $("#tabelaIE").clone(true)
.attr('id', function() {
return this.id + quantity;
})
.find(':text,:file')
.attr('id', function() {
return this.id + quantity;
})
.val("")
.end();
//VALUE -> 1|Taxa de locação|ENC|15.00|FIX|POR|VLT|%
//$ID_ImpEnc|$nome|$tipo|$valor|$calculo|$valor_em|$aplicacao|$a
//APLICAÇÃO: [SEG] Sobre seguro, [KML] KmLivre, [DIA] Diária, [IE] Impostos/Encargos, [VLT] no valor total
//VALOR EM.: [MOT] Montante, [POR] Porcentagem.
//CALCULO..: [DIA]Por dia, [FIX]Fixo
//TIPO.....: [TXV]Taxa de Venda, [ENC]Encargos Extras
aplicacao = values[6];
valor_em = values[5];
calculo = values[4];
tipo = values[2];
if (valor_em == "MON" && calculo == "FIX") {
table.find('.tNome').text(values[1]);
table.find('.tDias').text("1");
table.find('.tValor').text(values[3]);
tTotal = values[3] * 1;
table.find('.tTotal').text(tTotal.toFixed(2));
}
if (valor_em == "MON" && calculo == "DIA") {
table.find('.tNome').text(values[1]);
table.find('.tDias').text($("#dias").val());
table.find('.tValor').text(values[3]);
tTotal = values[3] * $("#dias").val();
table.find('.tTotal').text(tTotal.toFixed(2));
}
if (valor_em == "POR" && calculo == "FIX") {
if (aplicacao == "SEG") {
$V = (50 + 30) / 100;
table.find('.tNome').text(values[1]);
table.find('.tDias').text("1");
table.find('.tValor').text(values[3]);
tTotal = values[3] * $V;
table.find('.tTotal').text(tTotal.toFixed(2));
}
if (aplicacao == "KML") {
$V = values[3] / 100;
table.find('.tNome').text(values[1]);
table.find('.tDias').text("1");
table.find('.tValor').text(values[3]);
tTotal = values[3] - $V;
table.find('.tTotal').text(tTotal.toFixed(2));
}
if (aplicacao == "DIA") {
$V = (values[3] * $("#dias").val()) / 100;
table.find('.tNome').text(values[1]);
table.find('.tDias').text($("#dias").val());
table.find('.tValor').text(values[3]);
tTotal = values[3] * $V;
table.find('.tTotal').text(tTotal.toFixed(2));
}
if (aplicacao == "VLT") {
$V = $("#totalFatura").val() / 100;
table.find('.tNome').text(values[1]);
table.find('.tDias').text("1");
table.find('.tValor').text(values[3].substring(0, 2) + "%");
tTotal = values[3] * $V;
table.find('.tTotal').text(tTotal.toFixed(2));
}
}
values.forEach(function(valor, index) {
table.find('[class="split' + (index + 1) + '"]').val(valor)
});
table.appendTo('#abc');
var oldVal = $('#somaTabelaIE').val();
$('#somaTabelaIE').val(eval(oldVal || 0) + eval(tTotal));
} else {
tTotal = values[3] * $("#dias").val();
var oldVal = $('#somaTabelaIE').val();
$('#somaTabelaIE').val(oldVal - eval(tTotal));
//remove a table que pertence ao checkbox
$("table#tabelaIE" + $(this).data('qty')).remove();
}
$(".recalcula").click();
}).change();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tab_cliente"></div>
<input type="radio" class="situacao" name="situacao" id="situacao_reserva" value="R" disabled /> Reservation
<input type="radio" class="situacao" name="situacao" id="situacao_saida" value="S" checked />Output
<input type="radio" class="situacao" name="situacao" id="situacao_chegada" value="C" />Arrival
<p>
dataIni: <input name="dataIni" type="text" id="data_ini" value="01/04/2019 08:00" />
dataFim: <input name="dataFim" type="text" id="data_fim" value="03/04/2019 08:00" />
DAYS: <input type="text" id="dias" style="width: 50px">
</p>
<p>===============================================</p>
Invoice total: <input type="text" id="totalFatura" value="100.00" />
<p>===============================================</p>
<strong>OPTIONS:</strong>
<div id="D1">1.
<input name="opcoes[]" class="c Obrig" type="checkbox" checked value="1|Rental Rate|ENC|15.00|FIX|POR|VLT|%" alt="15.00" title="Rental Rate" /> <b> Rental Rate </b>
</div>
<div id="D2">2.
<input name="opcoes[]" class="c " type="checkbox" checked value="2|GPS|ENC|5.00|DIA|MON|DIA|" alt="5.00" title="GPS" /> GPS
</div>
<div id="D3">3.
<input name="opcoes[]" class="c " type="checkbox" value="3|Car wash|ENC|30.00|FIX|MON|VLT|" alt="30.00" title="Car wash" /> Car wash
</div>
<div id="D4">4.
<input name="opcoes[]" class="c " type="checkbox" checked value="4|Transfer|ENC|35.00|FIX|MON|VLT|" alt="35.00" title="Transfer" /> Transfer
</div>
<p>===============================================</p>
<table width="400" border="0">
<tr>
<td><b>RATES AND SERVICES</b></td>
</tr>
<tr>
<td>
<div id="abc">
<table id="tabelaIE" width='400' border='0'>
<tr>
<td class="tNome" width='190px'></td>
<td class="tDias" width='50px' align='center'></td>
<td class="tValor" width='60px' align='right'></td>
<td class="tTotal" width='100px' align='right'></td>
<td class="tValores">
<input type="hidden" class="split1" value="">
<input type="hidden" class="split2" value="">
<input type="hidden" class="split3" value="">
<input type="hidden" class="split4" value="">
<input type="hidden" class="split5" value="">
<input type="hidden" class="split6" value="">
<input type="hidden" class="split7" value="">
<input type="hidden" class="split8" value="">
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<p>===============================================</p>
SUMMARY OF RATES AND SERVICES:
<input type="text" class="somaTabelaIE" id="somaTabelaIE" value="0">Upvotes: 0
Views: 172
Answers (1)
Asav Vora
Reputation: 71
Changes: Add event into change function and track event is bubble or not (property change with client click or default set in HTML tag).
Query: In uncheck logic minus total amount with multiply by number of days instead of quantity.
Edit: Get total value (amount * Qty) from html table which is related to checkbox (i.e unchecked checkbox).
Edit 2: Change method to get total amount and simplify var Qty = $("#abc tr:contains('"+$(this).attr('title')+"') .tTotal").text(); . Edited snippet working properly.
Edit 3: Change Id generating Logic var quantity = eval($("table[id^=tabelaIE]:last").attr('id').replace("tabelaIE","0"))+1.
Edit 4: Change for New checkbox Output and Active Recalculations.
$(document).ready(function() {
var data = new Date();
var dia = ("0" + data.getDate()).slice(-2);
var mes = ("0" + (data.getMonth() + 1)).slice(-2);
var ano4 = data.getFullYear();
var hora = ("0" + data.getHours()).slice(-2);
var min = ("0" + data.getMinutes()).slice(-2);
var str_data = dia + '/' + mes + '/' + ano4;
var str_hora = hora + ':' + min;
$("input[name=situacao]").on('change', function() {
$('#somaTabelaIE').val("");
$('.tTotal:visible').each(function(){ $('#somaTabelaIE').val(Number($('#somaTabelaIE').val()) + Number(this.innerHTML))})
if ($(this).val() == "S") {
$("#data_ini").attr("readonly", true);
$("#data_ini").attr("disabled", true);
$('#tab-kmUsado').hide();
} else if ($(this).val() == "C") {
$("#data_fim").attr("readonly", true);
$("#data_fim").attr("disabled", true);
$("#situacao_saida").attr("disabled", false);
$("#data_fim").val(str_data + " " + str_hora);
$("#tab_cliente").mouseover();
$('#tab-avisoKmUsado').hide();
$('#tab-kmUsado').show();
if ($("#selectPlano").val() == "KL") {
$("#planoDia").html($("#dias").val());
$("#planoValor").html($("#valor_dia_kmlivre").val());
planoTotal = $("#dias").val() * $("#valor_dia_kmlivre").val();
$("#planoTotal").html(planoTotal.toFixed(2));
$(".planoTotal").val(planoTotal.toFixed(2));
}
if ($("#selectPlano").val() == "KMC") {
$("#planoDia").html($("#dias").val());
$("#planoValor").html($("#valor_diaria_controlada").val());
planoTotal = $("#dias").val() * $("#valor_diaria_controlada").val();
$("#planoTotal").html(planoTotal.toFixed(2));
$(".planoTotal").val(planoTotal.toFixed(2));
}
if ($("#selectPlano").val() == "DI") {
$("#planoDia").html($("#dias").val());
$("#planoValor").html($("#valor_diaria").val());
planoTotal = $("#dias").val() * $("#valor_diaria").val();
$("#planoTotal").html(planoTotal.toFixed(2));
$(".planoTotal").val(planoTotal.toFixed(2));
}
if ($("input[type=radio][name='seguroCarro']:checked").val() =="S") {
$("#SegCarroS2").html($("#dias").val());
$("#SegCarroS3").html($("#val_seguro_carro").val());
seguroV = $("#dias").val() * $("#val_seguro_carro").val();
$("#SegCarroS4").html(seguroV.toFixed(2));
$(".SegCarroS4").val(seguroV.toFixed(2));
} else {
$("#SegCarroS2").html("0");
$("#SegCarroS3").html("0");
$("#SegCarroS4").html("0.00");
$(".SegCarroS4").val("0.00");
}
if ($("input[type=radio][name='seguroTerceiros']:checked").val() == "S") {
$("#SegTerceirosT2").html($("#dias").val());
$("#SegTerceirosT3").html($("#val_seguro_terceiros").val());
seguroT = $("#dias").val() * $("#val_seguro_terceiros").val();
$("#SegTerceirosT4").html(seguroT.toFixed(2));
$(".SegTerceirosT4").val(seguroT.toFixed(2));
} else {
$("#SegTerceirosT2").html("0");
$("#SegTerceirosT3").html("0");
$("#SegTerceirosT4").html("0.00");
$(".SegTerceirosT4").val("0.00");
}
$(".recalcula").click();
} else {
}
}).parent().find("input[name=situacao]:checked").change();
$("#tab_cliente").on('mouseover', function() {
DAY = 1000 * 60 * 60 * 24;
var data_ini = $("#data_ini").val().toString().split('/');
data_ini2 = data_ini[1] + "/" + data_ini[0] + "/" + data_ini[2];
d1 = new Date(data_ini2);
var data_fim = $("#data_fim").val().toString().split('/');
data_fim2 = data_fim[1] + "/" + data_fim[0] + "/" + data_fim[2];
d2 = new Date(data_fim2);
$("#data_ini2").val($("#data_ini").val());
var diasLocacao = Math.round((d2.getTime() - d1.getTime()) / DAY);
$("#dias").val(diasLocacao);
}).mouseover();
$(".c").on('change', function(e) {
var values = $(this).val().split('|');
if ($(this).prop('checked')) {
var quantity = eval($("table[id^=tabelaIE]:last").attr('id').replace("tabelaIE","0"))+1
$(this).data('qty', quantity);
var table = $("#tabelaIE").clone(true)
.attr('id', function() {
return this.id + quantity;
})
.find(':text,:file')
.attr('id', function() {
return this.id + quantity;
})
.val("")
.end();
//VALUE -> 1|Taxa de locação|ENC|15.00|FIX|POR|VLT|%
//$ID_ImpEnc|$nome|$tipo|$valor|$calculo|$valor_em|$aplicacao|$a
//APLICAÇÃO: [SEG] Sobre seguro, [KML] KmLivre, [DIA] Diária, [IE] Impostos/Encargos, [VLT] no valor total
//VALOR EM.: [MOT] Montante, [POR] Porcentagem.
//CALCULO..: [DIA]Por dia, [FIX]Fixo
//TIPO.....: [TXV]Taxa de Venda, [ENC]Encargos Extras
aplicacao = values[6];
valor_em = values[5];
calculo = values[4];
tipo = values[2];
if (valor_em == "MON" && calculo == "FIX") {
table.find('.tNome').text(values[1]);
table.find('.tDias').text("1");
table.find('.tValor').text(values[3]);
tTotal = values[3] * 1;
table.find('.tTotal').text(tTotal.toFixed(2));
}
if (valor_em == "MON" && calculo == "DIA") {
table.find('.tNome').text(values[1]);
table.find('.tDias').text($("#dias").val());
table.find('.tValor').text(values[3]);
tTotal = values[3] * $("#dias").val();
table.find('.tTotal').text(tTotal.toFixed(2));
}
if (valor_em == "POR" && calculo == "FIX") {
if (aplicacao == "SEG") {
$V = (50 + 30) / 100;
table.find('.tNome').text(values[1]);
table.find('.tDias').text("1");
table.find('.tValor').text(values[3]);
tTotal = values[3] * $V;
table.find('.tTotal').text(tTotal.toFixed(2));
}
if (aplicacao == "KML") {
$V = values[3] / 100;
table.find('.tNome').text(values[1]);
table.find('.tDias').text("1");
table.find('.tValor').text(values[3]);
tTotal = values[3] - $V;
table.find('.tTotal').text(tTotal.toFixed(2));
}
if (aplicacao == "DIA") {
$V = (values[3] * $("#dias").val()) / 100;
table.find('.tNome').text(values[1]);
table.find('.tDias').text($("#dias").val());
table.find('.tValor').text(values[3]);
tTotal = values[3] * $V;
table.find('.tTotal').text(tTotal.toFixed(2));
}
if (aplicacao == "VLT") {
$V = $("#totalFatura").val() / 100;
table.find('.tNome').text(values[1]);
table.find('.tDias').text("1");
table.find('.tValor').text(values[3].substring(0, 2) + "%");
tTotal = values[3] * $V;
table.find('.tTotal').text(tTotal.toFixed(2));
}
}
values.forEach(function(valor, index) {
table.find('[class="split' + (index + 1) + '"]').val(valor)
});
table.appendTo('#abc');
var oldVal = $('#somaTabelaIE').val();
$('#somaTabelaIE').val(eval(oldVal || 0) + eval(tTotal));
} else if(e.bubbles) {
var Qty = $("#abc tr:contains('"+$(this).attr('title')+"') .tTotal").text();
var oldVal = $('#somaTabelaIE').val();
$('#somaTabelaIE').val(oldVal - eval(Qty));
//remove a table que pertence ao checkbox
$("table#tabelaIE" + $(this).data('qty')).remove();
}
$(".recalcula").click();
}).change();
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tab_cliente"></div>
<input type="radio" class="situacao" name="situacao" id="situacao_reserva" value="R" disabled /> Reservation
<input type="radio" class="situacao" name="situacao" id="situacao_saida" value="S" checked />Output
<input type="radio" class="situacao" name="situacao" id="situacao_chegada" value="C" />Arrival
<p>
dataIni: <input name="dataIni" type="text" id="data_ini" value="01/04/2019 08:00" />
dataFim: <input name="dataFim" type="text" id="data_fim" value="03/04/2019 08:00" />
DAYS: <input type="text" id="dias" style="width: 50px">
</p>
<p>===============================================</p>
Invoice total: <input type="text" id="totalFatura" value="100.00" />
<p>===============================================</p>
<strong>OPTIONS:</strong>
<div id="D1">1.
<input name="opcoes[]" class="c Obrig" type="checkbox" checked value="1|Rental Rate|ENC|15.00|FIX|POR|VLT|%" alt="15.00" title="Rental Rate" /> <b> Rental Rate </b>
</div>
<div id="D2">2.
<input name="opcoes[]" class="c " type="checkbox" checked value="2|GPS|ENC|5.00|DIA|MON|DIA|" alt="5.00" title="GPS" /> GPS
</div>
<div id="D3">3.
<input name="opcoes[]" class="c " type="checkbox" value="3|Car wash|ENC|30.00|FIX|MON|VLT|" alt="30.00" title="Car wash" /> Car wash
</div>
<div id="D4">4.
<input name="opcoes[]" class="c " type="checkbox" checked value="4|Transfer|ENC|35.00|FIX|MON|VLT|" alt="35.00" title="Transfer" /> Transfer
</div>
<p>===============================================</p>
<table width="400" border="0">
<tr>
<td><b>RATES AND SERVICES</b></td>
</tr>
<tr>
<td>
<div id="abc">
<table id="tabelaIE" width='400' border='0'>
<tr>
<td class="tNome" width='190px'></td>
<td class="tDias" width='50px' align='center'></td>
<td class="tValor" width='60px' align='right'></td>
<td class="tTotal" width='100px' align='right'></td>
<td class="tValores">
<input type="hidden" class="split1" value="">
<input type="hidden" class="split2" value="">
<input type="hidden" class="split3" value="">
<input type="hidden" class="split4" value="">
<input type="hidden" class="split5" value="">
<input type="hidden" class="split6" value="">
<input type="hidden" class="split7" value="">
<input type="hidden" class="split8" value="">
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<p>===============================================</p>
SUMMARY OF RATES AND SERVICES:
<input type="text" class="somaTabelaIE" id="somaTabelaIE" value="0">Upvotes: 1
Related Questions
- How to calculate the value of checked box?
- Calculating Checkboxes in JavaScript
- How to calculate numbers (total) based on the checked checkboxes using jQuery?
- Calculate total on checkbox checked
- calculate total value checkboxes jquery
- how to calculate numbers of checked checkbox using javascript(jquery)
- How to get value of different checkboxes and calculate value of those checked checkboxes and show in the input field?
- how to calculate checkbox value using jquery
- jquery calculate html values next to checked checkboxes
- Calculating checkbox totals with jQuery