I am having trouble coming up with the following logic. I have two checkboxes and within each checkbox is two data price values. One is the solo-price
, which I want to use if only one checkbox is selected. Then I have a combined-price
in which I want to use if both checkboxes are selected ... think bundled pricing.
I am having two issues, both relating to the combined pricing.
-when both checkboxes are selected, I cannot figure out how to use the combined pricing to show up in the package1-review-price
or package2-price-review
divs. Basically rewriting the following variables.
var package1Price = [];
var package2Price = [];
-Then my second issue is in direct relation to the issue above. When both checkboxes are selected, the total takes the sum of solo-price
and combination-price
. It shows the total as $46, when it should be $21.
Within the calcTotalPrice
function, I tried nesting the total commands, like this... but it did not help.
if ($('#package2').not(':checked') && $('#package1').is(':checked')) {
$('#package1:checked').each(function() {
totalPrice += parseInt($(this).data('solo-price'));
});
}
Does anyone see what is wrong with my logic?
var package1Price = [];
var package2Price = [];
$('.product-check').on('change', function() {
if ($('#package1').is(':checked') && $('#package2').is(':checked')) {
$('#packages-selected').toggle(100).html('Both packages selected');
}
if ($('#package2').not(':checked') && $('#package1').is(':checked')) {
//Package 1 single Price
var str = $('#package1:checked').map(function() {
return "$" + $(this).data('solo-price');
}).toArray().join(" ");
$('#product1-price-review').toggle().html(str);
calcTotalPrice();
//$('#packages-selected').toggle(100).html('Package 1 Selected');
}
else if ($('#package1').not(':checked')) {
$('#product1-price-review').toggle();
package1Price = 0;
}
if ($('#package1').not(':checked') && $('#package2').is(':checked')) {
var str = $('#package2:checked').map(function() {
return "$" + $(this).data('solo-price');
}).toArray().join(" ");
$('#product2-price-review').html(str);
$('#product1-price-review').hide();
calcTotalPrice();
// $('#packages-selected').toggle(100).html('Package 2 Selected');
}
else if ($('#package2').not(':checked')) {
$('#product2-price-review').hide();
package2Price = 0;
}
});
function calcTotalPrice() {
var totalPrice = 0;
var tpPrice = 0;
$('#package1:checked').each(function() {
totalPrice += parseInt($(this).data('solo-price'));
});
$('#package2:checked').each(function() {
tpPrice += parseInt($(this).data('solo-price'));
});
if ($('#package1').is(':checked') && $('#package2').is(':checked')) {
$('#package1:checked,#package2:checked').each(function() {
tpPrice += parseInt($(this).data('combined-price'));
});
}
$('#package-review-total').html("Total $ " + (totalPrice + tpPrice));
}
#packages-selected, #product1-price-review, #product2-price-review {
display: none;
}
<script src="http://ift.tt/1qRgvOJ"></script>
<input type="checkbox" class="product-check" id="package1" value="Product 1" data-solo-price="10" data-combined-price="8">
<input type="checkbox" class="product-check" id="package2" value="Product 2" data-solo-price="15" data-combined-price="13">
<p id="product1-price-review"></p>
<p id="product2-price-review"></p>
<p id="package-review-total"></p>
<p id="packages-selected"></p>
Aucun commentaire:
Enregistrer un commentaire