开发一个 HTML 文档,其中包含了一组复选框和一个提交按钮,复选框的内容为苹 果( 每个 59 美分) 、桔子( 每个 49 美分) 和香蕉( 每个 39 美分) 。每个复选框都应该有自己 的 的 onclick 事件处理程序。这些事件处理程序必须能够将对应的水果价格添加到总价格 中。 针对提交按钮的事件处理程序必须能够产生一个 alert 窗口, 其中的消 息格式为 Your total cost is $xxx ,其中 xxx 是所选水果的总价格加上 5% 的销售税。这个处理程序必须 返回 false( 以免真正传送表单数据) 。
时间: 2024-02-19 19:03:03 浏览: 46
复选框全选处理.html
以下是一个实现了上述功能的 HTML 文档:
```html
<!DOCTYPE html>
<html>
<head>
<title>Fruits Order Form</title>
<script>
function calculateTotal() {
var applePrice = 0.59;
var orangePrice = 0.49;
var bananaPrice = 0.39;
var total = 0;
if (document.getElementById("apple").checked) {
total += applePrice;
}
if (document.getElementById("orange").checked) {
total += orangePrice;
}
if (document.getElementById("banana").checked) {
total += bananaPrice;
}
total *= 1.05;
alert("Your total cost is $" + total.toFixed(2));
return false;
}
</script>
</head>
<body>
<h1>Fruits Order Form</h1>
<form onsubmit="return calculateTotal();">
<label for="apple">
<input type="checkbox" id="apple" onclick="return false;"> Apple ($0.59 each)
</label>
<br>
<label for="orange">
<input type="checkbox" id="orange" onclick="return false;"> Orange ($0.49 each)
</label>
<br>
<label for="banana">
<input type="checkbox" id="banana" onclick="return false;"> Banana ($0.39 each)
</label>
<br>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
```
在这个 HTML 文档中,我们使用了 JavaScript 来实现了计算总价格和弹出提示框的功能。在每个复选框上,我们都添加了一个 `onclick` 事件处理程序,其返回值为 `false`,以防止表单的默认提交行为。在提交按钮上,我们使用了 `onsubmit` 事件处理程序,其返回值也为 `false`,以防止表单的真正提交。
阅读全文