1.开发一个HTML 文档,其中包含了一组复选框和一个提交按钮,复选框的内容为苹果(每个59 美分)、桔子(每个49 美分)和香蕉(每个39 美分)。每个复选框都应该有自己的onclick 事件处理程序。这些事件处理程序必须能够将对应的水果价格添加到总价格中。针对提交按钮的事件处理程序必须能够产生一个alert 窗口,其中的消息格式为Your total cost is $xxx,其中xxx 是所选水果的总价格加上5%的销售税。
时间: 2024-02-12 11:09:09 浏览: 160
好的,下面是HTML代码,你可以在浏览器中运行它:
```html
<!DOCTYPE html>
<html>
<head>
<title>Fruit Shop</title>
</head>
<body>
<h2>Fruit Shop</h2>
<label><input type="checkbox" value="0.59" onclick="updateTotal()"> Apple ($0.59 each)</label><br>
<label><input type="checkbox" value="0.49" onclick="updateTotal()"> Orange ($0.49 each)</label><br>
<label><input type="checkbox" value="0.39" onclick="updateTotal()"> Banana ($0.39 each)</label><br>
<br>
<button onclick="showTotal()">Submit</button>
<script>
var total = 0;
function updateTotal() {
total = 0;
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
total += parseFloat(checkboxes[i].value);
}
}
}
function showTotal() {
updateTotal();
var subtotal = total.toFixed(2);
var tax = (total * 0.05).toFixed(2);
var totalCost = (parseFloat(subtotal) + parseFloat(tax)).toFixed(2);
alert("Your total cost is $" + totalCost);
}
</script>
</body>
</html>
```
这个HTML文档中包含了一组三个复选框和一个提交按钮。每个复选框都有一个onclick事件处理程序updateTotal(),它会在复选框状态改变时,重新计算所选水果的总价格。提交按钮有一个onclick事件处理程序showTotal(),它会显示一个alert窗口,其中包括所选水果的总价格和销售税。
阅读全文