开发一个 HTML 文档,其中包含了一组复选框和一个提交按钮,复选框的内容为苹 果( 每个 59 美分) 、桔子( 每个 49 美分) 和香蕉( 每个 39 美分) 。每个复选框都应该有自己 的 的 onclick 事件处理程序。这些事件处理程序必须能够将对应的水果价格添加到总价格 中。 针对提交按钮的事件处理程序必须能够产生一个 alert 窗口, 其中的消 息格式为 Your total cost is $xxx ,其中 xxx 是所选水果的总价格加上 5% 的销售税。这个处理程序必须 返回 false( 以免真正传送表单数据) 。
时间: 2024-02-20 09:59:26 浏览: 81
以下是一个满足要求的 HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Fruit Order Form</title>
<script>
function updateTotal() {
var applePrice = 0.59;
var orangePrice = 0.49;
var bananaPrice = 0.39;
var subtotal = 0;
if (document.getElementById('apple').checked) {
subtotal += applePrice;
}
if (document.getElementById('orange').checked) {
subtotal += orangePrice;
}
if (document.getElementById('banana').checked) {
subtotal += bananaPrice;
}
var tax = subtotal * 0.05;
var total = subtotal + tax;
document.getElementById('total').innerHTML = '$' + total.toFixed(2);
}
function handleSubmit() {
updateTotal();
var total = parseFloat(document.getElementById('total').innerHTML.substring(1));
alert('Your total cost is $' + (total + tax).toFixed(2));
return false;
}
</script>
</head>
<body>
<h1>Fruit Order Form</h1>
<p>Please select the fruits you want to order:</p>
<form onsubmit="return handleSubmit();">
<label><input type="checkbox" id="apple" onclick="updateTotal();">Apple ($0.59 each)</label><br>
<label><input type="checkbox" id="orange" onclick="updateTotal();">Orange ($0.49 each)</label><br>
<label><input type="checkbox" id="banana" onclick="updateTotal();">Banana ($0.39 each)</label><br>
<br>
<label>Total cost (including 5% sales tax): <span id="total">$0.00</span></label><br>
<br>
<input type="submit" value="Submit Order">
</form>
</body>
</html>
```
这个 HTML 文件包含一个表单,其中包含了三个复选框和一个提交按钮。每个复选框都有一个 onclick 事件处理程序,调用了名为 updateTotal 的函数。这个函数根据选择的水果计算出了总价,并将结果显示在一个 span 元素中。提交按钮的 onclick 事件处理程序调用了名为 handleSubmit 的函数,该函数计算出了总价并显示一个 alert 窗口,然后返回 false 阻止表单提交。
阅读全文