//需求，勾选选项时，总价格要跟着变，点击添加数量，总价格也要跟着变，全部要动态变化

//代码如下

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

.jisuan{

display: inline-block;

}

.num{

display: inline-block;

width: 50px;

text-align: center;

}

</style>

</head>

<body>

<ul id="list">

<li>

<input type="checkbox" name="" class="ch" checked="checked">

<span>第一件</span>

<span class="price">199.00</span>

<div class="jisuan"><button class="mul">-</button><span class="num">1</span><button class="plus">+</button></div>

<span class="pertotle">199.00</span>

<button class="del">删除</button>

</li>

<li>

<input type="checkbox" name="" class="ch" >

<span>第二件</span>

<span class="price">299.00</span>

<div class="jisuan"><button class="mul">-</button><span class="num">1</span><button class="plus">+</button></div>

<span class="pertotle">299.00</span>

<button class="del">删除</button>

</li>

<li>

<input type="checkbox" name="" class="ch" >

<span>第三件</span>

<span class="price">99.00</span>

<div class="jisuan"><button class="mul">-</button><span class="num">1</span><button class="plus">+</button></div>

<span class="pertotle">99.00</span>

<button class="del">删除</button>

</li>

</ul>

<div class="box">

全选<input type="checkbox" class="checkAll">

<span class="delCheck">删除</span>

件数<span class="totleNum">0</span>

总价格<span class="totlePrice">0</span>

</div>

<script type="text/javascript" src="jquery.1.11.1.min.js"></script>

<script type="text/javascript">

function totle(){

// 总计数

var t1 = 0;

// 总价格

var t2 =0;

console.log(t2);

$("#list li").each(function(){

console.log(this);

if ($(this).find(".ch").prop("checked")==true) {

t1+=parseFloat($(this).find(".num").text());

t2+=parseFloat($(this).find(".pertotle").text());

}

})

$(".totleNum").text(t1);

$(".totlePrice").text(t2);

}

totle();

// 所有加号  减号  数量按钮

$("#list li .ch").click(function(){

var flag = true;

$("#list li .ch").each(function(){      //遍历每一个单选框

if($(this).prop("checked")==false){     //prop();给表单元素设置和获取属性

flag= false;

}

});

if (flag) {

$(".checkAll").prop("checked",true);

}else{

$(".checkAll").prop("checked",false);

}

totle();

});

$(".mul").click(function(){                       //减号按钮被点击时，接下来要 干嘛

if ($(this).next().text()==="0") {

return;

};

var n = $(this).next().text();                    //获得加好前一个文本内容，就是件数

$(this).next().text(--n);

var p = $(this).next().text()*$(this).parent().prev().text(); //p为记录每件的总价

$(this).parent().next().text(p);                        //每件总价的文本内容用p来填充

totle();

});

$(".plus").click(function(){                      //加好按钮被点击时，接下来要 干嘛

var n = $(this).prev().text();                 //获得加好前一个文本内容，就是件数

//console.log(n);

$(this).prev().text(++n);

var p = $(this).prev().text()*$(this).parent().prev().text();    //件数*单价=总价

$(this).parent().next().text(p);

totle();

});

$(".del").click(function(){                    //删除按钮被点击时，接下来要干嘛

var res = confirm("del?");

if (res) {

$(this).parent().remove();

totle();

}

});

$(".checkAll").click(function(){

var $that = $(this);                    //$(this)指.checkAll，谁调用谁

$(".ch").each(function(){

$(this).prop("checked",$that.prop("checked"));  //this指每一个单选框

});

totle();

});

$(".delCheck").click(function(){

$("li").each(function(){

if ($(this).find(".ch").prop("checked")) {        //this指每一个li

$(this).remove();                       //如果是出于勾选状态就要内移除

}

});

totle();

});

</script>

</body>

</html>

Jquery实现功能---购物车的更多相关文章

  1. 现代浏览器内置的可等效替代jQuery的功能

    jQuery的体积在不断的增大.新功能要不断增加,这是必然结果.虽然从版本1.8.3开始的瘦身效果明显,但不可否认的是,对于移动手机端的网 页开发,它仍然是不可接受的.当然,jQuery不是铁板一块, ...

  2. 基于jQuery+HTML5加入购物车代码

    基于jQuery+HTML5加入购物车代码.这是一款基于jquery+html5实现的支持累加计价的网站购物车代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  3. MyEclipse6.0中使用aptana插件，添加jquery提示功能

    MyEclipse6.0中使用aptana插件,添加jquery提示功能 第一:查看当前MyEclipse集成的eclipse的版本,, 查看路径    D:/MyEclipse 6.0/eclips ...

  4. jQuery实现简单购物车页面

    功能描述: 当全选按钮被按下时,所有商品的小复选框(以及另外一个全选按钮)的选中状态跟按下的全选按钮保持一致: 当用户选中商品时,如果所有商品都被选中,就让全选按钮为选中状态: 用户可以点击 + - ...

  5. jQuery基础入门+购物车案例详解

    jQuery是一个快速.简洁的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多 ...

  6. 【jQuery 分页】jQuery分页功能的实现

    自写的jQuery实现分页功能的分页组件: 功能效果如下: 分页组件就是上图中的三部分, 分别放在表格上部  和下部 . 其中, 1>>>页面的代码如下: product.jsp 其 ...

  7. jQuery实现加入购物车飞入动画效果

    <script src="jquery.js"></script> <script src="jquery.fly.min.js" ...

  8. Jquery小功能实例

    下拉框内容选中左右移动 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sele ...

  9. 自己在项目中写的一个Jquery插件和Jquery tab 功能

    后台查询结果 PDFSearchResult实体类: [DataContract(Name = "PDFSearchResult")] public class PDFSearch ...

随机推荐

  1. 深入学习二叉树（07）B树

    问题背景 在大型的数据库存储中,实现索引查找,如果采用二叉查找树的查找的话,由于节点的存储数据是有限的,这样如果数据库很大的话,就会导致树的深度过大从而造成磁盘 IO 操作过于频繁,就会造成效率低下 ...

  2. UNICODE UTF编码方式解析

    先明确几个概念 基础概念部分 1.字符编码方式CEF(Character Encoding Form) 对符号进行编码,便于处理与显示 常用的编码方式有 GB2312(汉字国标码 2字节) ASCII ...

  3. mcast_get_if函数

    #include <errno.h> int sockfd_to_family(int); int mcast_get_if(int sockfd) { switch (sockfd_to ...

  4. SpringBoot启动使用elasticsearch启动异常：Received message from unsupported version:[2.0.0] minimal compatible

    SpringBoot启动使用elasticsearch启动异常:Received message from unsupported version:[2.0.0] minimal compatible ...

  5. 实现纸牌游戏的随机抽牌洗牌过程（item系列几个内置方法的实例）

    实现纸牌游戏的随机抽牌洗牌过程(item系列几个内置方法的实例) 1.namedtuple:命名元组,可以创建一个没有方法只有属性的类 from collections import namedtup ...

  6. 关于自学java的内容及感受

    这周自学了关于java输入的知识:java输入的方法与c++和c有些不同,他需要在开头加一个import连接系统的包,才能进行输入语句的编写. 自己编写了一点简单的输入的程序: package mod ...

  7. 下载安装charles并导入证书、使用

    抓包原理 1.截获真实客户端的 HTTPS请求,伪装客户端向真实服务端发送 HTTPS 请求. 2.接受真实服务器响应,用 Charles 自己证书伪装服务端向真实客户端发送内容 3.证书导入 看博客 ...

  8. Topcoder SRM 590 Fox And City

    Link 注意到原图给的是一个无向连通图. 如果在原图中两点之间有一条无向边,那么这两点到\(1\)的距离之差不大于\(1\). 这个命题的正确性是显然的,我们考虑它的逆命题: 给定每个点到\(1\) ...

  9. 【转】路由转发过程的IP及MAC地址变化

    A-----(B1-B2)-----(C1-C2)-------E 就假设拓扑图是这个样子吧,B1和B2是路由器B上的两个接口,C1和C2是路由器C上的两个接口,A和E是PC,由主机A向主机E发送数据 ...

  10. LeetCode 83. Remove Duplicates from Sorted List（从有序链表中删除重复节点）

    题意:从有序链表中删除重复节点. /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode ...