开发一个 HTML 文档,其中包含了一组复选框和一个提交按钮, 复选框的内容为苹果(每个 59 美分)、桔子(每个 49 美分)和香蕉(每 个 39 美分)。每个复选框都应该有自己的 onclick 事件处理程序。这 些事件处理程序必须能够将对应的水果价格添加到总价格中。针 对提交按钮的事件处理程序必须能够产生一个 alert 窗口,其中 的消息格式为 Your total cost is $xxx,其中 xxx 是所选水果的总价 格加上 5%的销售税
时间: 2024-02-18 09:05:24 浏览: 71
好的,以下是一个简单的 HTML 文件,实现了一个复选框组和一个提交按钮,复选框的内容为苹果、桔子和香蕉,每个复选框都有自己的 onclick 事件处理程序,点击提交按钮会弹出一个 alert 窗口,显示所选水果的总价加上 5% 的销售税。
```html
<!DOCTYPE html>
<html>
<head>
<title>水果价格计算器</title>
</head>
<body>
<h1>请选择您需要购买的水果:</h1>
<form>
<label for="apple"><input type="checkbox" id="apple" name="fruit" value="apple" onclick="calculatePrice()">苹果 (每个 59 美分)</label><br>
<label for="orange"><input type="checkbox" id="orange" name="fruit" value="orange" onclick="calculatePrice()">桔子 (每个 49 美分)</label><br>
<label for="banana"><input type="checkbox" id="banana" name="fruit" value="banana" onclick="calculatePrice()">香蕉 (每个 39 美分)</label><br>
<br>
<input type="button" value="提交" onclick="submitOrder()">
</form>
<script>
var price = 0;
function calculatePrice() {
var appleChecked = document.getElementById("apple").checked;
var orangeChecked = document.getElementById("orange").checked;
var bananaChecked = document.getElementById("banana").checked;
price = 0;
if (appleChecked) {
price += 0.59;
}
if (orangeChecked) {
price += 0.49;
}
if (bananaChecked) {
price += 0.39;
}
}
function submitOrder() {
var total = price * 1.05;
alert("Your total cost is $" + total.toFixed(2));
}
</script>
</body>
</html>
```
这个 HTML 文件使用了 `<form>` 标签包裹了复选框组和提交按钮。每个复选框都有自己的 onclick 事件处理程序,点击某个复选框时,价格会重新计算。点击提交按钮时,会调用 submitOrder() 函数,计算总价格并弹出一个 alert 窗口显示总价和税费。
阅读全文