Something like this???
Code:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title> Product summation </title>
</head>
<body>
<div id="priceList">
<li> <input type="checkbox" value="1.00"> Apples ($1.00) </li>
<li> <input type="checkbox" value="1.50"> Bananas ($1.50) </li>
<li> <input type="checkbox" value="3.50"> Cherries ($3.50) </li>
<li> <input type="checkbox" value="2.50"> Oranges ($2.50) </li>
<li> <input type="checkbox" value="5.00"> Watermelon ($5.00) </li>
<div id="priceTotal" />
</div>
<script type="text/javascript">
// For: http://www.webdeveloper.com/forum/showthread.php?268169-How-can-I-create-a-function-that-calculate-total-price-of-products&daysprune=30
(function() { /* Place BELOW all <li> tags */
var as = document.getElementById('priceList').getElementsByTagName("li");
for( var i = 0; as[i]; i++ ) as[i].onclick = f;
function f() {
var sum = 0;
var cb = document.getElementById('priceList').getElementsByTagName('input');
for( var i=0; cb[i]; i++ ) if (cb[i].checked) { sum += cb[i].value*1; }
document.getElementById('priceTotal').innerHTML = 'Total: $'+sum.toFixed(2);
}
})();
// Above modified from: http://www.codingforums.com/showthread.php?t=281682
</script>
</body>
</html>
How can I create a function that calculate total price of products?
Reply With Quote
Bookmarks