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

//代码如下

<!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. ➡️➡️➡️IELTS Listening

    目录 src numbers and letters src https://ielts-simon.com/ielts-help-and-english-pr/ielts-listening/ nu ...

  2. Github 结合 Hexo 搭建轻量博客

    http://www.open-open.com/lib/view/open1481532171287.html 开始 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或 ...

  3. 测试Nginx中location的优先级！（重点）

    location [=|~|~*|^~] /uri/ { … } = 开头表示精确匹配 ~ 开头表示区分大小写的正则匹配 ~* 开头表示不区分大小写的正则匹配 ^~ 开头表示uri以某个常规字符串开头 ...

  4. php 算法知识 猴子选大王

    一群猴子排成一圈,按1,2,...,n依次编号. 然后从第1只开始数,数到第m只,把它踢出圈, 从它后面再开始数,再数到第m只,在把它踢出去..., 如此不停的进行下去,直到最后只剩下一只猴子为止,那 ...

  5. scrapy-redis分布式

    scrapy是python界出名的一个爬虫框架,提取结构性数据而编写的应用框架,可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. 虽然scrapy 能做的事情很多,但是要做到大规模的分 ...

  6. Myeclipse创建HTML文件中文显示乱码问题

    例如 运行结果 错误原因 不同浏览器的,编码格式不同 解决方法 运行结果 通常charset的设值我们常用的有gb2312,gbk,utf-8三种,即有三种编码规定: <meta http-eq ...

  7. 七 Struts2访问Servlet的API方式二：原生方式

    Struts2访问Servlet的API方式二:原生方式 和解耦合的方式不同,原生方式既可以拿到域对象,也可以调用域对象中的方法 前端jsp: <%@ page language="j ...

  8. spring boot中的底层配置文件application.yam(application.property)的装配原理初探

    *在spring boot中有一个基础的配置文件application.yam(application.property)用于对spring boot的默认设置做一些改动. *在spring boot ...

  9. 搭建python虚拟环境virtualenv

    virtualenv 是一个创建隔离Python环境的工具,创建虚拟环境运行,达到节省本地运行空间的目的. 安装vitualenv # pip install virtualenv 创建一个虚拟环境( ...

  10. 高版本的Hibernate

    我的查询语句是“from TA pojo where pojo.tbs.name='tb1'”,可结果报错. 高版本的Hibernate不能这样查Set了, 要改成这样: from TA pojo i ...