html购物车+本店总计+总价+全选

最新推荐文章于 2023-03-24 14:07:09 发布
最新推荐文章于 2023-03-24 14:07:09 发布
阅读量2.1k 收藏 10
点赞数 3


 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta name="format-detection" content="telephone=no"/>
 <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
 <title>购物车</title>
 <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
 <script type="text/javascript" src="js/shopping.js"></script>
 <link type="text/css" rel="stylesheet" href="css/base.css" />
 <link type="text/css" rel="stylesheet" href="css/module.css" />
 </head>
  
 <body>
 <!--头部开始-->
 <div class="header">
 <h1>购物车</h1>
 <a href="#" class="back"><span></span></a>
 <a href="#" class=""></a>
 </div>
 <!--头部结束-->
 <div class="shopping">
  
 <div class="shop-group-item">
 <div class="shop-name">
 <input type="checkbox" class="check goods-check shopCheck">
 <h4><a href="#">苹果专卖店</a></h4>
 <div class="coupons"><span>领券</span><em>|</em><span>编辑</span></div>
 </div>
 <ul>
 <li>
 <div class="shop-info">
 <input type="checkbox" class="check goods-check goodsCheck">
 <div class="shop-info-img"><a href="#"><img src="images/computer.jpg" /></a></div>
 <div class="shop-info-text">
 <h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
 <div class="shop-brief"><span>重量:3.3kg</span><span>颜色:标配版</span><span>版本:13.3英寸</span></div>
 <div class="shop-price">
 <div class="shop-pices">￥<b class="price">100.00</b></div>
 <div class="shop-arithmetic">
 <a href="javascript:;" class="minus">-</a>
 <span class="num" >1</span>
 <a href="javascript:;" class="plus">+</a>
 </div>
 </div>
 </div>
 </div>
 </li>
 <div class="shop-info">
 <input type="checkbox" class="check goods-check goodsCheck">
 <div class="shop-info-img"><a href="#"><img src="images/computer.jpg" /></a></div>
 <div class="shop-info-text">
 <h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
 <div class="shop-brief"><span>重量:3.3kg</span><span>颜色:标配版</span><span>版本:13.3英寸</span></div>
 <div class="shop-price">
 <div class="shop-pices">￥<b class="price">100.00</b></div>
 <div class="shop-arithmetic">
 <a href="javascript:;" class="minus">-</a>
 <span class="num" >1</span>
 <a href="javascript:;" class="plus">+</a>
 </div>
 </div>
 </div>
 </div>
 </li>
 <li>
 <div class="shop-info">
 <input type="checkbox" class="check goods-check goodsCheck">
 <div class="shop-info-img"><a href="#"><img src="images/computer.jpg" /></a></div>
 <div class="shop-info-text">
 <h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
 <div class="shop-brief"><span>重量:3.3kg</span><span>颜色:标配版</span><span>版本:13.3英寸</span></div>
 <div class="shop-price">
 <div class="shop-pices">￥<b class="price">100.00</b></div>
 <div class="shop-arithmetic">
 <a href="javascript:;" class="minus">-</a>
 <span class="num" >1</span>
 <a href="javascript:;" class="plus">+</a>
 </div>
 </div>
 </div>
 </div>
 </li>
 </ul>
 <div class="shopPrice">本店总计：￥<span class="shop-total-amount ShopTotal">0.00</span></div>
 </div>
  
 <div class="shop-group-item">
 <div class="shop-name">
 <input type="checkbox" class="check goods-check shopCheck">
 <h4><a href="#">苹果专卖店</a></h4>
 <div class="coupons"><span>领券</span><em>|</em><span>编辑</span><!--<span class="shop-total-amount ShopTotal">0</span>--></div>
 </div>
 <ul>
 <li>
 <div class="shop-info">
 <input type="checkbox" class="check goods-check goodsCheck">
 <div class="shop-info-img"><a href="#"><img src="images/computer.jpg" /></a></div>
 <div class="shop-info-text">
 <h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
 <div class="shop-brief"><span>重量:3.3kg</span><span>颜色:标配版</span><span>版本:13.3英寸</span></div>
 <div class="shop-price">
 <div class="shop-pices">￥<b class="price">100.00</b></div>
 <div class="shop-arithmetic">
 <a href="javascript:;" class="minus">-</a>
 <span class="num" >1</span>
 <a href="javascript:;" class="plus">+</a>
 </div>
 </div>
 </div>
 </div>
 </li>
 <li>
 <div class="shop-info">
 <input type="checkbox" class="check goods-check goodsCheck">
 <div class="shop-info-img"><a href="#"><img src="images/computer.jpg" /></a></div>
 <div class="shop-info-text">
 <h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
 <div class="shop-brief"><span>重量:3.3kg</span><span>颜色:标配版</span><span>版本:13.3英寸</span></div>
 <div class="shop-price">
 <div class="shop-pices">￥<b class="price">100.00</b></div>
 <div class="shop-arithmetic">
 <a href="javascript:;" class="minus">-</a>
 <span class="num" >1</span>
 <a href="javascript:;" class="plus">+</a>
 </div>
 </div>
 </div>
 </div>
 </li>
 </ul>
 <div class="shopPrice">本店总计：￥<span class="shop-total-amount ShopTotal">0.00</span></div>
 </div>
 </div>
  
 <div class="payment-bar">
 <div class="all-checkbox"><input type="checkbox" class="check goods-check" id="AllCheck">全选</div>
 <div class="shop-total">
 <strong>总价：<i class="total" id="AllTotal">0.00</i></strong>
 <span>减免：123.00</span>
 </div>
 <a href="#" class="settlement">结算</a>
 </div>
 </body>
 </html>
 

yin_chenglong
关注
html购物车结算代码,JavaScript购物车结算案例
weixin_39732825的博客
06-07 3765
1、HTML代码当当网购物车页面关闭商品图片商品信息单价数量总价操作 我和狗狗活下来了¥¥21.90移入收藏删除 灰霾来了怎么办¥¥24.00移入收藏删除商品总计：结 算1、JS代码//减function minus(num){var prices=document.getElementsByName("price")[num].value;var count=par...
uniapp小程序购物车功能，实现全选 反选 单选，计算总价
m0_49078080的博客
09-23 3537
功能效果 实现代码 HTML部分 <view class="list-item" v-for="(item,index) in goodList" :key='index'> <view class="group"> <checkbox-group @change="changeitem(item)" checked class="checkbox"> <checkbox :value="item.unitPrice" :checked
HTML+CSS实现购物车表格
qq_37086980的博客
11-13 1万+
HTML: <main> <div class="container"> <table border="0" cellspacing = "0" id = "shoppingcartinfo"> <thead> <tr> <th width = ..
html购物车总价,JS实现购物车计算.html
weixin_30010987的博客
06-07 460
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">Documentbody,ul,li,p{padding:0;margin:0;}body{background-color:#ccc;}ul{width: 500px;margin:1...
html单选计算总价,[每天进步一点点~] 购物车页面基本实现，单选、多选、全选商品，计算所勾选商品价格（保留小数点后2位）...
weixin_42467573的博客
06-27 692
购物车页面image.png用uni-app来写的代码实现html部分代码{{item.title}}￥ {{item.price}}-{{item.count}}+商品数量：{{totalNum}}合计：￥ {{totalPrice}}去结算js部分代码export default {data() {return {is_select: false,is_selectAll: false,lis...
商品的全选/取消全选+总金额计算（HTML源码）
qq_43109561的博客
05-26 1528
实现： 点击全选全部选中，再次点击全选时取消全选，点击总金额时计算出选中的内容并显示。 实现效果： 代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>商品的全选+金额计算</title> <!-- ...
【购物车全选案例】(html,css,javascript)
m0_70684059的博客
03-24 282
【购物车全选案例】(html,css,javascript)
前端_购物车选择多选少选
qq_39707849的博客
10-20 305
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script src="../package/angular-1.5.5/angular.min.js">script> script> var myapp = angular.module("myapp", [
angular/html/购物车
Zmq321834649的博客
10-24 369
实现购物车功能
html checkbox 全选与反选
aa8102980的博客
06-09 143
之所以记录这个博客，是因为我完全用jquery，无法实现自己想要的结果（通过一个checkbox的选中或不选中控制其他多个checkbox状态） <input type="checkbox" name="test" />圣诞节 <input type="checkbox" name="test" />股市 <input type="c...
html购物车
12-06
很简单的html购物车，适合刚开始学习html的同学，非常实用。
购物车全选功能，总计功能，侧滑删除
01-09
在微信小程序的开发中，购物车功能是电商应用的核心部分，其中包括了购物车全选、总计计算以及侧滑删除等重要操作。这些功能的实现，不仅提升了用户体验，也使得商品管理更加便捷。以下是对这些功能的详细解释： 1....
通过jquery实现购物车的全选加减以及计算总价
weixin_52153452的博客
12-15 1917
通过jquery实现购物车的全选加减以及计算总价
vue3中购物车单选，全选计算总价购买
liyongchunscr的博客
12-26 1193
购物车的全选，单选，计算总价钱 先用请求的数据循环输出到页面，在数组中为每条数据input加一个状态 在每条数据的input中加点击事件传下标 计算方法封装到一个函数中，计算选中状态的商品，在每次使用时调用， 点击单个商品卡片的时候传这个当前商品的下标，然后在事件中检查当前信息中存在不存在选中的属性如果不存在则给这个信息中添加这一属性，如果该商品存在这一属性则状态取反 循环数组判断为true的数量是否与数组长度相等，是则全选框也为true，当有一个单选为false时全...
实现购物车的全选、删除、修改背景颜色、小计
weixin_51470018的博客
05-06 1084
下面是购物车相关代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的购物车-品优购</title> <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的
html 计算单价,Js写购物车全选全不选计算单价总价代码
weixin_29170327的博客
07-02 575
PHP交流群:294088839,Python交流群:652376983方法一:function chk(){var chkAll=document.getElementById('J_SelectAllCbx2');var chks=document.getElementsByName('items');for(var i=0;ichks[i].checked=chkAll.checked;}}...
HTML5-购物车全选--小计-
itszt888的博客
08-14 850
1、楼梯样式兼容—–index1.html在火狐浏览器上显示有问题。 动态滚动条—-谷歌是body,火狐、ie用html, 所以用html,body Bol值写不写均可。2、购物车对火狐的兼容—–index2.html\3、淘宝购物车商品事件 保留两位小数
html实现购物车全选,vue实现商品购物车全选与全不选项目实战
weixin_36139228的博客
06-07 670
项目需求：实现一个购物车全选框实现对商家和商品的全选商家全选框实现对当前商家所有商品的全选取消其中一个商品则取消对应商家全选和全选框选中一个商家下的所有商品则勾选对应商家的全选框，不勾选全选框选中所有商品则勾选所有商家全选框和全选框我的思路：1、通过对数据的简单操作可实现更深层次的全选操作2、vue.$set(object, key, value)给对象添加属性可以更新视图3、通过es6的ever...
HTML 购物车计算总价+添加或者减少商品数量
热门推荐
遗声落西秦
12-12 1万+
var app=angular.module("myapp",[]); app.controller("demoC",["$scope",function($scope) { $scope.ShoppingCar=[{Title:"红苹果",Count:1,UnitPrice:2.5},{Title:"绿苹果",Count:1,UnitPrice:2}]; //定义函数
vue+vant实现购物车全选反选和计算总价
最新发布
09-20
在Vue.js框架中结合Vant UI库来实现购物车的全选反选功能以及计算总价，你可以这样做： 首先，你需要安装`vant`库，可以使用npm或yarn命令： ```bash npm install vant # 或者 yarn add vant ``` 然后，在你的Vue组件中引入需要的样式和组件，比如`van-checkbox`用于复选框： ```html <template> <div> <van-checkbox v-model="selectAll" @change="toggleAll">全选</van-checkbox> <ul> <li v-for="(item, index) in products" :key="index"> <van-checkbox v-model="item.checked" @change="updateTotal"></van-checkbox> 商品名称：{{ item.name }}，价格：{{ item.price }} </li> </ul> <p>总价：{{ totalPrice }}</p> </div> </template> <script> import { Checkbox } from 'vant'; export default { components: { Checkbox, }, data() { return { selectAll: false, products: [ // 假设这是你的商品列表... ], totalPrice: 0, }; }, methods: { toggleAll() { this.products.forEach((item) => (item.checked = this.selectAll)); this.updateTotal(); }, updateTotal() { this.totalPrice = this.products.filter((item) => item.checked).reduce((sum, item) => sum + item.price, 0); }, }, }; </script> ``` 在这个例子中，`selectAll`属性控制所有商品的选中状态，当全选按钮改变时，会调用`toggleAll`方法更新所有商品的选中状态，并通过`updateTotal`计算总价。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值