购物车加减库存以及多选框的选择实现改变总价
{__NOLAYOUT__} <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="__STATIC__/index_style/js/jquery-2.2.0.min.js" ></script> </head> <body> <table border="1"> <tr> <th> 全选/全不选<br> <input type="checkbox" id="choose"> </th> <th>商品图片</th> <th>商品名称</th> <th>商品单价</th> <th>商品数量</th> <th>商品小计</th> </tr> {volist name="data" id="v" key="k"} <tr> <td><input type="checkbox" class="cho"></td> <td><img src="__STATIC__/uploads/{$v.goods_img}" width="100" height="100"></td> <td>{$v.goods_name}</td> <td>{$v.goods_price}</td> <td> <button type="button" class="jia">+</button> <span>{$v.num}</span> <button type="button" class="jian">-</button> </td> <td class="count_price">{$v.count_price}</td> </tr> {/volist} </table> 总价:¥<span id="zongjia">0</span> </body> </html> <script> //多选框的点击事件 $('.cho').click(function(){ sum_price(); }) //计算总价 function sum_price(){ var sum=0 var obj = $("input[class=cho]"); for (var i = 0; i < obj.length; i++) { if(obj[i]['checked']){ sum+=Number($(obj[i]).parents("tr").find('.count_price').text()); } } $("#zongjia").text(sum); } //加号事件 $(".jia").click(function(){ //单价 var one_price = Number($(this).parent().prev().text()); //计算数量 var num = Number($(this).next()[0]['textContent']); num = num+1; //数量替换 $(this).next().text(num) //小计 xiaoji = num*one_price; //替换 $(this).parent().next().text(xiaoji) sum_price() }) //减号事件 $(".jian").click(function(){ //单价 var one_price = Number($(this).parent().prev().text()); //计算数量 var num = Number($(this).prev()[0]['textContent']); num = num-1 <= 0 ? 1: num-1; //数量替换 $(this).prev().text(num) //小计 xiaoji = num*one_price; //替换 $(this).parent().next().text(xiaoji) sum_price() }) </script>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现