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

//代码如下

<!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. 【PAT甲级】1053 Path of Equal Weight (30 分)（DFS）

    题意: 输入三个正整数N,M,S(N<=100,M<N,S<=2^30)分别代表数的结点个数,非叶子结点个数和需要查询的值,接下来输入N个正整数(<1000)代表每个结点的权重 ...

  2. 简单实用的matlab柱状图显示比例及计数

    这个小代码用于matlab柱状图显示比例及数值, 函数如下: function myhist(x) % myhist Codeby SimonLiang % Email:idignew@126.com ...

  3. Redis 简易消息队列

    为了保持程序的高效,建议使用ProtoBuf. Google Protocol Buffer( 简称 Protobuf) 是 Google 公司内部的混合语言数据标准,目前已经正在使用的有超过 48, ...

  4. FastStone Capture 截图工具

    主要功能介绍 截屏 包括了全屏截取,当前活动窗口截取,截取选定区域,多边形截取和截取滚动页面等,基本上常用的都有了.特别是滚动截取,许多朋友为了这个功能,不惜安装各种重量级的截屏软件,甚至四处下载各种 ...

  5. 牛客网Sql

    牛客网Sql: 1.查询最晚入职的员工信息  select * from employees where hire_date =(select max(hire_date) from employee ...

  6. AttributeError: 'Word2Vec' object has no attribute 'vocab'

    在 Gensim 1.0.0 版本后移除了 vocab,需使用 model.wv.vocab

  7. js数组去重解决方案

    js数组去重是前端面试中经常被问的题目,考察了面试者对js的掌握,解决问题的思路,以及是否具有专研精神.曾经一位前端界大神告诉我,解决问题的方式有很多种,解决问题时多问问自己还有没有其他的方法,探求最 ...

  8. SQL模糊匹配之正则表达式

    −      方括号[ ]:指定一个字符.字符串.匹配他们中的任意一个. −      示例1:查询用户名以J或者以M开头的用户信息 −      SELECT user_name FROM ecs_ ...

  9. LeetCode中等题(二)

    题目一: 给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复的三元组. 注意:答案中不可以包含重复 ...

  10. CF1285D Dr. Evil Underscores

    挂个链接 Description: 给你 \(n\) 个数 \(a_1,a_2,--,a_n\) ,让你找出一个 \(x\) ,使 \(x\) 分别异或每一个数后得到的 \(n\) 个结果的最大值最小 ...