开发一个 HTML 文档，其中包含了一组复选框和一个提交按钮，复选框的内容为苹果(每个 59 美分)、桔子(每个 49 美分)和香蕉(每个 39 美分)。每个复选框都应该有自己的 onclick 事件处理程序。这些事件处理程序必须能够将对应的水果价格添加到总价格中。针对提交按钮的事件处理程序必须能够产生一个 alert 窗口，其中的消息格式为 Your total cost is $xxx，其中 xxx 是所选水果的总价格加上 5%的销售税。

时间: 2024-02-21 16:58:55 浏览: 114

复选框全选处理.html

以下是一个简单的实现，使用了 HTML、CSS 和 JavaScript： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物车</title> <style> label { display: block; margin: 10px 0; } </style> </head> <body> <form> <label> <input type="checkbox" name="apple" value="0.59" onclick="updateTotal()"> 苹果 - $0.59 </label> <label> <input type="checkbox" name="orange" value="0.49" onclick="updateTotal()"> 桔子 - $0.49 </label> <label> <input type="checkbox" name="banana" value="0.39" onclick="updateTotal()"> 香蕉 - $0.39 </label> <p>Total: $<span id="total">0.00</span></p> <button type="submit" onclick="submitForm()">提交</button> </form> <script> const form = document.querySelector('form'); const totalEl = document.querySelector('#total'); function updateTotal() { let total = 0; const checkboxes = form.querySelectorAll('input[type="checkbox"]'); checkboxes.forEach(function(checkbox) { if (checkbox.checked) { total += parseFloat(checkbox.value); } }); totalEl.textContent = total.toFixed(2); } function submitForm() { updateTotal(); const total = parseFloat(totalEl.textContent); const message = 'Your total cost is $' + (total * 1.05).toFixed(2); alert(message); } </script> </body> </html> ``` 这个 HTML 文档定义了一个表单，其中包含了三个复选框和一个提交按钮。每个复选框都有自己的 onclick 事件处理程序，当用户点击它们时，会调用 updateTotal 函数来更新总价格。提交按钮有自己的 onclick 事件处理程序，当用户点击它时，会调用 submitForm 函数来计算总价格加上销售税，并在一个 alert 窗口中显示它。在 JavaScript 部分，updateTotal 函数会获取所有被选中的复选框的值，并将它们相加得到总价格，然后将总价格显示在页面上。submitForm 函数会调用 updateTotal 函数，然后计算总价格加上销售税，并在一个 alert 窗口中显示它。注意，这里销售税是硬编码为 5%，如果需要更改税率，只需在代码中更改一个地方即可。

阅读全文

相关推荐

用于yolo训练格式的数据集，数据集中包含的水果有苹果香蕉梨橙子

js实现iPhone界面风格的单选框和复选框按钮实例

苹果、橘子和香蕉总价计算

html标签总结

HTML基础：掌握HTML标记语言的基本语法

深入JavaFX自定义控件：10种高级技术扩展框架功能

HTML基础语法与标签的使用

pandas-1.3.5-cp37-cp37m-macosx_10_9_x86_64.zip

基于java的大学生兼职信息系统答辩PPT.pptx

基于java的乐校园二手书交易管理系统答辩PPT.pptx

tornado-6.4-cp38-abi3-musllinux_1_1_i686.whl

Android Studio Ladybug（android-studio-2024.2.1.10-mac.zip.002）

基于ssm框架+mysql+jsp实现的监考安排与查询系统

tornado-6.1b2-cp38-cp38-macosx_10_9_x86_64.whl

Android Studio Ladybug（android-studio-2024.2.1.10-mac.zip.001）

最新推荐

Aspose资源包：转PDF无水印学习工具

管理建模和仿真的文件

【R语言高性能计算秘诀】：代码优化，提升分析效率的专家级方法

在构建视频会议系统时，如何通过H.323协议实现音视频流的高效传输，并确保通信的稳定性？

Go语言控制台输入输出操作教程

"互动学习：行动中的多样性与论文攻读经历"

【R语言机器学习新手起步】：caret包带你进入预测建模的世界

在选择PL2303和CP2102/CP2103 USB转串口芯片时，应如何考虑和比较它们的数据格式和波特率支持能力？

红外遥控报警器原理及应用详解下载

关系数据表示学习