HTML 水果商店: 使用复选框计算价格并显示总计
<!DOCTYPE html>
<html>
<head>
<title>Fruit Shop</title>
<script>
var totalCost = 0;
<pre><code> function calculateTotal() {
var selectedFruits = document.querySelectorAll('input[type="checkbox"]:checked');
var subtotal = 0;
for (var i = 0; i < selectedFruits.length; i++) {
if (selectedFruits[i].value === 'apple') {
subtotal += 0.59;
} else if (selectedFruits[i].value === 'orange') {
subtotal += 0.49;
} else if (selectedFruits[i].value === 'banana') {
subtotal += 0.39;
}
}
var total = (subtotal + subtotal * 0.05).toFixed(2);
alert('Your total cost is $' + total);
}
</script>
</code></pre>
</head>
<body>
<h1>Fruit Shop</h1>
<label><input type="checkbox" value="apple" onclick="totalCost += 0.59;"> Apple ($0.59)</label><br>
<label><input type="checkbox" value="orange" onclick="totalCost += 0.49;"> Orange ($0.49)</label><br>
<label><input type="checkbox" value="banana" onclick="totalCost += 0.39;"> Banana ($0.39)</label><br>
<button onclick="calculateTotal()">Submit</button>
</body>
</html>
<p>这段代码创建一个包含复选框和提交按钮的 HTML 文档。每个复选框都有一个对应的 onclick 事件处理程序，用于将所选水果的价格添加到总价格中。提交按钮有一个 onclick 事件处理程序，用于计算总价格并生成一个 alert 窗口显示总价格加上 5% 的销售税的消息。</p>
原文地址: https://www.cveoy.top/t/topic/4UG 著作权归作者所有。请勿转载和采集!