1
Ich arbeite gerade an einem Einkaufswagen, der die Summe automatisch berechnet, wenn der Verbraucher bestimmte Optionen auswählt. Ich bin derzeit auf den Kontrollkästchen fest. Ich möchte, dass sie automatisch innerhalb der Zwischensumme einmal überprüft. Wie Sie sehen können, wird alles erfolgreich berechnet, bis Sie zu den Kontrollkästchen gelangen. Wenn Sie mir helfen könnten, würde ich es sehr schätzen.Summe der Kontrollkästchen berechnen
PS: Ich bin ein Neuling
var removedItem,
sum = 0;
$(function(){
// calculate the values at the start
calculatePrices();
// Click to remove an item
$(document).on("click", "a.remove", function() {
removeItem.apply(this);
});
// Undo removal link click
$(document).on("click", ".removeAlert a", function(){
// insert it into the table
addItemBackIn();
//remove the removal alert message
hideRemoveAlert();
});
$(document).on("change", "input.quantity", function(){
var val = $(this).val(),
pricePer,
total
if (val <= "0") {
removeItem.apply(this);
} else {
// reset the prices
sum = 0;
// get the price for the item
pricePer = $(this).parents("td").prev("td").text();
// set the pricePer to a nice, digestable number
pricePer = formatNum(pricePer);
// calculate the new total
total = parseFloat(val * pricePer).toFixed(2);
// set the total cell to the new price
$(this).parents("td").siblings(".itemTotal").text("$" + total);
// recalculate prices for all items
calculatePrices();
}
});
});
function removeItem() {
// store the html
removedItem = $(this).closest("tr").clone();
// fade out the item row
$(this).closest("tr").fadeOut(500, function() {
$(this).remove();
sum = 0;
calculatePrices();
});
// fade in the removed confirmation alert
$(".removeAlert").fadeIn();
// default to hide the removal alert after 5 sec
setTimeout(function(){
hideRemoveAlert();
}, 5000);
}
function hideRemoveAlert() {
$(".removeAlert").fadeOut(500);
}
function addItemBackIn() {
sum = 0;
$(removedItem).prependTo("table.items tbody").hide().fadeIn(500)
calculatePrices();
}
function updateSubTotal(){
$("table.items td.itemTotal").each(function(){
var value = $(this).text();
// set the pricePer to a nice, digestable number
value = formatNum(value);
sum += parseFloat(value);
$("table.pricing td.subtotal").text("$" + sum.toFixed(2));
});
}
function addTax() {
var tax = parseFloat(sum * 0.13).toFixed(2);
$("table.pricing td.tax").text("$" + tax);
}
function calculateTotal() {
var subtotal = $("table.pricing td.subtotal").text(),
tax = $("table.pricing td.tax").text(),
post = $("table.pricing td.post").text(),
total;
subtotal = formatNum(subtotal);
tax = formatNum(tax);
post = formatNum(post);
total = (subtotal + tax + post).toFixed(2);
$("table.pricing td.orderTotal").text("$" + total);
}
function calculatePrices() {
updateSubTotal();
addTax();
calculateTotal();
}
function formatNum(num) {
return parseFloat(num.replace(/[^0-9-.]/g, ''));
}<html >
<head>
<meta charset="UTF-8">
<title>TITLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles/cartnormalize.css">
<link rel='stylesheet prefetch' href='http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="styles/cartstyle.css">
</head>
<body>
<div class="content">
<h1>Service Name</h1>
<p class="removeAlert">
Item has been removed. Made a mistake? <a href="#">Undo removal</a>
</p>
<table class="items">
<tbody>
<tr>
<td>
<p>
Amount
<br />
</p>
<p class="description">The minimum amount allowed is $160.00</p>
</td>
<td>$1.00</td>
<td>
<input type="number" class="quantity" value="160" min="160" />
<a href="#" class="remove">Remove</a>
</td>
<td class="itemTotal">$160.00</td>
</tr>
</tbody>
</table>
<Fieldset>
<legend>Extra features</legend>
<p><input type="checkbox" name="featured" value="59.99"/> Featured Project ($59.99)</p>
<p><input type="checkbox" name="featured" value="99.99"/> Private project ($99.99)</p>
</fieldset>
<div class="cost">
<h2>Order Overview</h2>
<table class="pricing">
<tbody>
<tr>
<td>Subtotal</td>
<td class="subtotal"></td>
</tr>
<tr>
<td>13% Fee</td>
<td class="tax"></td>
</tr>
<tr>
<td>Post Fee</td>
<td class="post">$99.99</td>
</tr>
<tr>
<td><strong>Total:</strong></td>
<td class="orderTotal"></td>
</tr>
</tbody>
</table>
<a class="cta" href="#">Checkout Now »</a>
</div>
</div> <!-- End Content -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
<script src="Scripts/Cart.js"></script>
</body>
</html>
Sie diesen Wert der Checkbox Eingabe der Menge machen, und dann bekommen nur den Wert der Checkbox – Adjit