购物车实现选中商品算出总价(js)

思想:a:首先可以通过数据库,当你点击一次选择时,对复选框进行扫描,查出所有已经被选中的复选框,这个复选框需要加一个自定义属性,这个属性就是这个商品的id号,通过id号在数据库查询相应的价格进行累加。b:我这里没有用数据库,因为我的上一个需求已经把价格从数据库拿出来了,所以我直接在复选框上加了一个商品价格的自定义属性,当每次点击复选框时对复选框进行扫描,查出所有已经被选中的复选框,然后获取到价格进行累加

效果
1.首先没点击时时0元
在这里插入图片描述
2.当点击一个复选框
在这里插入图片描述
3.当点击两个复选框
在这里插入图片描述
4.当点击全选复选框时
在这里插入图片描述
5.点击全不选
在这里插入图片描述

代码

html


                
  • 2
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的示例代码,可以让用户自定义商品的单价并计购物总价。代码使用了HTML、CSS和JavaScript,使用了表单元素和事件处理等基础知识。 ```html <!DOCTYPE html> <html> <head> <title>购物示例</title> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 8px; text-align: center; } th { background-color: #ddd; font-weight: bold; } .totalPrice { font-weight: bold; margin-top: 10px; } </style> <script> function calculateTotal() { // 获取表格中所有单价输入框和数量输入框 var priceInputs = document.querySelectorAll(".priceInput"); var quantityInputs = document.querySelectorAll(".quantityInput"); var total = 0; for (var i = 0; i < priceInputs.length; i++) { var price = parseFloat(priceInputs[i].value); var quantity = parseInt(quantityInputs[i].value); if (!isNaN(price) && !isNaN(quantity)) { total += price * quantity; } } // 将总价显示在页面上 document.getElementById("totalPrice").innerHTML = "总价:" + total.toFixed(2); } </script> </head> <body> <h1>购物</h1> <table> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> </tr> </thead> <tbody> <tr> <td>商品1</td> <td><input type="number" class="priceInput" value="10"></td> <td><input type="number" class="quantityInput" value="1"></td> </tr> <tr> <td>商品2</td> <td><input type="number" class="priceInput" value="15"></td> <td><input type="number" class="quantityInput" value="1"></td> </tr> <tr> <td>商品3</td> <td><input type="number" class="priceInput" value="20"></td> <td><input type="number" class="quantityInput" value="1"></td> </tr> </tbody> </table> <button onclick="calculateTotal()">计总价</button> <p id="totalPrice" class="totalPrice"></p> </body> </html> ``` 在代码中,我们先定义了一个表格,其中每个商品的单价和数量都是通过输入框进行输入的。我们给单价输入框和数量输入框都加上了相应的类名,以便在JavaScript代码中获取它们的值。 在JavaScript代码中,我们定义了一个calculateTotal函数,用于计购物总价。函数首先获取表格中所有单价输入框和数量输入框,然后遍历它们计总价,并将总价显示在页面上。 在HTML代码中,我们添加了一个计总价的按钮和一个用于显示总价的p元素。点击按钮时会调用calculateTotal函数计总价,并将总价显示在页面上。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值