开发一个 HTML 文档,其中包含了一组复选框和一个提交按钮, 复选框的内容为苹果(每个 59 美分)、桔子(每个 49 美分)和香蕉(每 个 39 美分)。每个复选框都应该有自己的 onclick 事件处理程序。这 些事件处理程序必须能够将对应的水果价格添加到总价格中。针 对提交按钮的事件处理程序必须能够产生一个 alert 窗口,其中 的消息格式为 Your total cost is $xxx,其中 xxx 是所选水果的总价 格加上 5%的销售税。
时间: 2024-02-18 17:05:52 浏览: 22
以下是代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fruits Order</title>
<script>
var totalCost = 0;
function calculateTotalCost() {
var applePrice = document.getElementById("apple").checked ? 0.59 : 0;
var orangePrice = document.getElementById("orange").checked ? 0.49 : 0;
var bananaPrice = document.getElementById("banana").checked ? 0.39 : 0;
totalCost = applePrice + orangePrice + bananaPrice;
}
function displayTotalCost() {
calculateTotalCost();
totalCost = totalCost + (totalCost * 0.05);
alert("Your total cost is $" + totalCost.toFixed(2));
}
</script>
</head>
<body>
<label><input type="checkbox" id="apple" onclick="calculateTotalCost()"> Apple ($0.59)</label><br>
<label><input type="checkbox" id="orange" onclick="calculateTotalCost()"> Orange ($0.49)</label><br>
<label><input type="checkbox" id="banana" onclick="calculateTotalCost()"> Banana ($0.39)</label><br>
<button onclick="displayTotalCost()">Submit</button>
</body>
</html>
```
首先定义一个全局变量 `totalCost` 来保存所选水果的总价格,然后定义两个函数:`calculateTotalCost()` 和 `displayTotalCost()`。`calculateTotalCost()` 函数用来计算总价格,它首先检查每个复选框是否被选中,如果被选中就加上对应的价格,否则不加;`displayTotalCost()` 函数用来显示总价格,它首先调用 `calculateTotalCost()` 函数计算总价格,然后加上 5% 的销售税,并弹出一个 alert 窗口显示总价格。
在 HTML 中,我们创建了三个复选框和一个提交按钮,每个复选框都有自己的 `onclick` 事件处理程序,当复选框被点击时就会调用 `calculateTotalCost()` 函数重新计算总价格。提交按钮有自己的 `onclick` 事件处理程序,当提交按钮被点击时就会调用 `displayTotalCost()` 函数显示总价格。
阅读全文