Add / subtract values from a checkbox
I have a checkbox that is checked by default and has a value of $ 50.00. Now I thought that if the user does not want to verify that $ 50.00. So, I'll just ask, how will I automatically add it to my grand image, and if it is removed, will it be subtracted from the grand one?
Html
<input type="checkbox" checked value="50.00" id="cbx1" /><label>Upgrade for $50.00</label><br>
<input type="checkbox" value="10.00" id="cbx2" /><label>Package A</label><br>
<input type="checkbox" value="20.00" id="cbx3" /><label>Package B</label><br>
<input type="checkbox" value="30.00" id="cbx4" /><label>Package C</label><br>
<input type="checkbox" value="40.00" id="cbx5" /><label>Package D</label><br>
<input type="text" id="grandtotal"/> Total:
script
function grandtotal(){
var a = 0;
var b = 0;
var c = 0;
var d = 0;
var e = 0;
if ($('#cbx1').is(":checked")) {
a = parseFloat($("#cbx1").val(), 10);
}
if ($('#cbx2').is(":checked")) {
b = parseFloat($("#cbx2").val(), 10);
}
if ($('#cbx3').is(":checked")) {
c = parseFloat($("#cbx4").val(), 10);
}
if ($('#cbx4').is(":checked")) {
d = parseFloat($("#cbx4").val(), 10);
}
if ($('#cbx5').is(":checked")) {
e = parseFloat($("#cbx5").val(), 10);
}
var total = a + b + c + d + e ;
$('#grandtotal').val('$' + total.toFixed(2));
+3
user4158463
source
to share
8 answers
I think you can summarize this:
//add change event action on checkbox
$(":checkbox").on("change", function() {
//change input #grandtotal value according check/uncheck checkboxes
$("#grandtotal").val(function() {
//declare a variable to keep the sum of the values
var sum = 0;
//using an iterator find and sum the values of checked checkboxes
$(":checkbox:checked").each(function() {
sum += ~~$(this).val();
});
return sum;
});
});
//here change the value according on checked checkboxes on DOM ready event
$("#grandtotal").val(function() {
var sum = 0;
$(":checkbox:checked").each(function() {
sum += ~~$(this).val();
});
return sum;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked value="50.00" id="cbx1" />
<label>Upgrade for $50.00</label>
<br>
<input type="checkbox" value="10.00" id="cbx2" />
<label>Package A</label>
<br>
<input type="checkbox" value="20.00" id="cbx3" />
<label>Package B</label>
<br>
<input type="checkbox" value="30.00" id="cbx4" />
<label>Package C</label>
<br>
<input type="checkbox" value="40.00" id="cbx5" />
<label>Package D</label>
<br>
<input type="text" id="grandtotal" />Total:
+8
source to share
Try it.
<input type="checkbox" onclick="grandtotal()" value="50.00" id="cbx1" /><label>Upgrade for $50.00</label><br>
<input type="checkbox" onclick="grandtotal()" value="10.00" id="cbx2" /><label>Package A</label><br>
<input type="checkbox" onclick="grandtotal()" value="20.00" id="cbx3" /><label>Package B</label><br>
<input type="checkbox" onclick="grandtotal()" value="30.00" id="cbx4" /><label>Package C</label><br>
<input type="checkbox" onclick="grandtotal()" value="40.00" id="cbx5" /><label>Package D</label><br>
<input type="text" id="grandtotal"/> Total:
function grandtotal(){
var a = 0;
var b = 0;
var c = 0;
var d = 0;
var e = 0;
if ($('#cbx1').is(":checked")) {
a = parseFloat($("#cbx1").val(), 10);
} else {
a=0;
}
if ($('#cbx2').is(":checked")) {
b = parseFloat($("#cbx2").val(), 10);
}else {
b=0;
}
if ($('#cbx3').is(":checked")) {
c = parseFloat($("#cbx4").val(), 10);
}else {
c=0;
}
if ($('#cbx4').is(":checked")) {
d = parseFloat($("#cbx4").val(), 10);
}else {
d=0;
}
if ($('#cbx5').is(":checked")) {
e = parseFloat($("#cbx5").val(), 10);
}else {
e=0;
}
var total = a + b + c + d + e ;
$('#grandtotal').val('$' + total.toFixed(2));
}
+1
source to share
Edit: I can now see that the textbox is checked by default. So it's just an onLoad function that calls your full calculations.
then
Add the onclick attribute to the checkbox that calls the grandtotal function.
<input type="checkbox" onclick="grandtotal()" value="50.00" id="cbx1" />
0
source to share
you can do this: use onclick
function grandtotal(){
var a = 0;
if ($('#cbx1').is(":checked")) {
a = parseFloat($("#cbx1").val(), 10);
}
var total = a + 10.00 ;
$('#grandtotal').val('$' + total.toFixed(2));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="50.00" id="cbx1" onclick="grandtotal()"/><label>Upgrade for $50.00</label><br>
Total:<input type="text" id="grandtotal" readonly/>
0
source to share
$("#cbx1").click(function () {
if ($('#cbx1').is(":checked")) {
a = parseFloat($("#cbx1").val(), 10);
var total = a + 10.00 ;
$('#grandtotal').val('$' + total.toFixed(2));
}
else{
$('#grandtotal').val('$'+10);
}
});
<input type="checkbox" value="50.00" id="cbx1" /><label>Upgrade for $50.00</label><br>
<input type="text" id="grandtotal"/> Total:
0
source to share
How easy is it to scroll through the checkboxes and not check individually?
grandTotal () {
var $packages = $('input:checked'),
total;
$packages.each(function(i, package){
total += $(package).val();
});
$('#grandtotal').val('$' + total);
}
Then call grandTotal how and when you need to update the price
0
source to share
Could you please check the jsfiddle link below,
http://jsfiddle.net/5udtC/7788/
Change your script code as follows:
$(document).ready(function () {
$("input").click(function () {
var a = 0;
var b = 0;
var c = 0;
var d = 0;
var e = 0;
if ($('#cbx1').is(":checked")) {
a = parseFloat($("#cbx1").val(), 10);
}
if ($('#cbx2').is(":checked")) {
b = parseFloat($("#cbx2").val(), 10);
}
if ($('#cbx3').is(":checked")) {
c = parseFloat($("#cbx4").val(), 10);
}
if ($('#cbx4').is(":checked")) {
d = parseFloat($("#cbx4").val(), 10);
}
if ($('#cbx5').is(":checked")) {
e = parseFloat($("#cbx5").val(), 10);
}
var total = a + b + c + d + e ;
$('#grandtotal').val('$' + total.toFixed(2));
});
});
Hope this helps you. Thank.
0
source to share