css

    *{font-style: normal}
.gw{margin: 8px;}
.gw::after{display: block;clear: both;content: '';margin: 10px;}
.gw_num{border: 1px solid #dbdbdb;width: 110px;line-height: 26px;overflow: hidden;float: left;}
.gw_num em{display: block;height: 26px;width: 26px;float: left;color: #7A7979;border-right: 1px solid #dbdbdb;text-align: center;cursor: pointer;font-style: normal}
.gw_num .num{display: block;float: left;text-align: center;width: 52px;font-style: normal;font-size: 14px;line-height: 24px;border: 0;}
.gw_num em.add{float: right;border-right: 0;border-left: 1px solid #dbdbdb;}
p{margin: 4px;padding: 0}
.choose,.qx{float: left;width: 20px;height: 20px;border: 1px solid #ccc; border-radius: 100%;margin-right: 10px;}
.choose-on, .qx-on{background: url(./on.png) no-repeat center center;background-size: 100%;}
    <div class="zong">
<div class="gw">
<div class="choose"></div>
<div class="gw_num">
<em class="jian">-</em>
<input type="text" value="0" class="num"/>
<em class="add">+</em>
</div>
<p>单价<i>20</i>元 总金额:¥<span>0</span></p>
<div class="del">删除</div>
</div>
<div class="gw">
<div class="choose"></div>
<div class="gw_num">
<em class="jian">-</em>
<input type="text" value="0" class="num"/>
<em class="add">+</em>
</div>
<p>单价<i>40</i>元 总金额:¥<span>0</span></p>
<div class="del">删除</div>
</div>
<div class="gw">
<div class="choose"></div>
<div class="gw_num">
<em class="jian">-</em>
<input type="text" value="0" class="num"/>
<em class="add">+</em>
</div>
<p>单价<i>40</i>元 总金额:¥<span>0</span></p>
<div class="del">删除</div>
</div>
<div class="gw">
<div class="choose"></div>
<div class="gw_num">
<em class="jian">-</em>
<input type="text" value="0" class="num"/>
<em class="add">+</em>
</div>
<p>单价<i>40</i>元 总金额:¥<span>0</span></p>
<div class="del">删除</div>
</div>
<div>
<div class="qx"></div>
<span>全选</span><span class="gs"></span>
<p class="a">金额总计:<span>0</span></p>
</div>
</div>

js

    $(function(){
$('.add').click(function(){
var n = $(this).prev().val()
var num = parseInt(n) + 1;
if(n == 5){num = 5} //设置最大数量 5
$(this).prev().val(num);
var money = $(this).parents('.gw').find('i').text()
var sum = money * num
var p = $(this).parents('.gw').find('span').text(sum)
// console.log(p) // var Sum = $(this).parents('.zong').find('.a > span').text(sum)
// console.log(Sum)
jiesuan()
})
$('.jian').click(function(){
var n = $(this).next().val();
var num = parseInt(n) - 1;
if(n == 0){num = 0} //设置最小数量 0
console.log(num)
$(this).next().val(num);
var money = $(this).parents('.gw').find('i').text()
var sum = money * num
var p = $(this).parents('.gw').find('span').text(sum)
jiesuan()
})
//选中
$('.choose').click(function(){
$(this).toggleClass('choose-on')
// console.log('aa')
jiesuan()
xz()
qx()
})
//全选
$('.qx').click(function(){
$(this).toggleClass('qx-on')
if($(this).is('.qx-on')){
$('.choose').addClass('choose-on')
}else{
$('.choose').removeClass('choose-on')
}
jiesuan()
qx()
}) //删除
$('.del').click(function(){
if(confirm('确定删除商品')){
$(this).parents('.gw').remove()
}
jiesuan()
qx()
// console.log(a) })
}) function jiesuan(){
var num = 0;
// alert('aa')
$('.gw').each(function(){
if($(this).find('.choose').is('.choose-on')){
//获取物品单价
var dj = $(this).find('i').text()
//获取物品数量
var sl = $(this).find('.num').val()
//合计
var hj = dj * sl
num += hj;
} })
$('.a>span').text(num)
} //单选--全选中
function xz(){
var choose = $('.choose')
var choose_on = $('.choose-on')
if(choose.length == choose_on.length){
$('.qx').addClass('qx-on')
}else{
$('.qx').removeClass('qx-on')
}
} //全选
function qx(){
$('.gs').text(' ')
var a = $('.choose-on').length;
$('.gs').text(a)
if(a > 0){
$('.gs').prev().text('已选')
}else{
$('.gs').prev().text('全选')
}
}

jq购物车结算功能的更多相关文章

  1. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  2. 微信小程序——购物车结算

    项目需要做个购物车结算功能,先分析需求: 1.全选,反选的功能.当选中的个数 = 购物车的数量时,勾选全选按钮,反之则取消选中全选按钮: 2.改变选中状态时,计算总价和总数量: 3.单个产品的数量加减 ...

  3. 使用jQuery制作一个简易的购物车结算流程

    因为今天下午时候在网上买了东西,在结算界面的时候突发奇想的也想自己动手做一个结算界面,当然了,只是一个最简易的结算界面,有商品数量的加减,有单价和小计,单个多个删除,全选和区县全选等等一些小功能,我在 ...

  4. python3 练习题(用函数完成登录注册以及购物车的功能)

    ''' 用函数完成登录注册以及购物车的功能 作业需求: 1,启动程序,用户可选择四个选项:登录,注册,购物,退出. 2,用户注册,用户名不能重复,注册成功之后,用户名密码记录到文件中. 3,用户登录, ...

  5. JS实现购物车动态功能

    整理了一下当时学js写的一些案例,觉得购物车功能在一般网站比较常见且基础,现在把它整理出来,需要的小伙伴可以参考一下. 该案例购物车主要功能如下: 1. 商品单选.全选.反选功能 2. 商品添加.删除 ...

  6. python实现简单的循环购物车小功能

    python实现简单的循环购物车小功能 # -*- coding: utf-8 -*- __author__ = 'hujianli' shopping = [ ("iphone6s&quo ...

  7. jquery-防多店铺购物车结算全选,单选,及删除,价格计算

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 微信小程序 - 实现购物车结算

    示例源码下载:小程序-实现购物车结算

  9. spring boot:用rocketmq消息订阅实现删除购物车商品功能(spring boot 2.3.3)

    一,为什么要使用消息队列实现删除购物车商品功能? 消息队列主要用来处理不需要立刻返回结果的业务, 常见的例子: 用户在下单后,要清除原购物车中的商品, 这个处理过程不需要马上实现也不需要返回结果给用户 ...

随机推荐

  1. VS2012调试执行,网页打不开

    360修复漏洞篇 TODO 修复了漏洞.vs2012在firefox和ie中都打不开 解决思路:360漏洞修复→已安装漏洞→卸载刚刚安装的漏洞 就可以解决 忽略漏洞 正常打开.

  2. InnoDB: Error: log file .\ib_logfile0 is of different size 0 10485760 bytes

    启动WAMP Server的时候报例如以下的错误: 140618 23:12:32 [Note] Plugin 'FEDERATED' is disabled. 140618 23:12:32 Inn ...

  3. srm 539

    http://mlz000.github.io/2015/07/15/srm-539/ 250 Description: 从若干个盒子中随意选择几个装石头.每一个盒子容量都有上下限,一旦选择使用某个盒 ...

  4. Codeforces Round #271 (Div. 2) D.Flowers DP

    D. Flowers   We saw the little game Marmot made for Mole's lunch. Now it's Marmot's dinner time and, ...

  5. java 多线程——并发编程模型 学习笔记

                                                                                                 并发编程模型 ...

  6. WPF,Silverlight与XAML读书笔记(3) - 标记扩展

    hystar的.Net世界 博客园 首页 新闻 新随笔 联系 管理 订阅 随笔- 103  文章- 0  评论- 107  WPF,Silverlight与XAML读书笔记(3) - 标记扩展   说 ...

  7. Tool:安全狗

    ylbtech-Tool:安全狗 安全狗,互联网安全品牌,云安全服务与解决方案提供商 .企业用户遍布互联网金融.电商.游戏.移动互联网.政府单位等多个行业. 1.返回顶部 1.   2. 2.返回顶部 ...

  8. JSP-Runoob:JSP 发送邮件

    ylbtech-JSP-Runoob:JSP 发送邮件 1.返回顶部 1. JSP 发送邮件 虽然使用JSP实现邮件发送功能很简单,但是需要有JavaMail API,并且需要安装JavaBean A ...

  9. Akka源码分析-故障恢复

    Actor故障恢复是akka中非常重要的内容,在之前的博客中虽然有介绍,但都是杂糅在其他知识点的细节中,本博客将单独介绍这一部分的故障恢复.为了简化分析的单独,本文只研究用户的actor故障恢复的步骤 ...

  10. JavaScript--确认(confirm 消息对话框)

    confirm 消息对话框通常用于允许用户做选择的动作,如:“你对吗?”等.弹出对话框(包括一个确定按钮和一个取消按钮). 语法: confirm(str); 参数说明: str:在消息对话框中要显示 ...