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

//代码如下

<!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. 【原】从浏览器数据一个URL的全过程

    1.根据域名到DNS找到IP 2.根据IP建立TCP三次握手连接 3.连接成功发出http请求 4.服务器响应http请求 5.浏览器解析html代码并请求html中的静态资源(js/css) 6.关 ...

  2. docker运行安装mysql postgres

    安装mysql [root@host1 ~]# docker images -a REPOSITORY TAG IMAGE ID CREATED SIZE docker.io/mysql 5.7 4d ...

  3. C++11常用特性介绍——decltype关键字

    一.decltype的意义 有时我们只想从表达式的类型推断出要定义的变量类型,但是不想用其值进行初始化的时候,C++11新标准引入了decltype类型说明符,它的作用是选择并返回操作数的数据类型,在 ...

  4. JAVA语言实现简单登录界面

    程序设计思想: 使用Math.random()方法循环生成6个97~122之间的随机整数(对应ASCII码值‘a’~‘z’),将其转化为char型变量,连接成为一个6位字符串作为验证码输出,提示用户输 ...

  5. 电影推荐算法---HHR计划

    1,先看FM部分. 2,看看冷启动. 0,热门召回源. 1,男女召回源,年龄召回源,职业召回源,score最高. 2,男女年龄职业相互组合: 3,存入redis.天级别更新. 3,召回+排序先搞懂. ...

  6. PAT甲级2019冬季考试题解

    A Good In C纯模拟题,用string数组读入数据,注意单词数量的判断 #include<bits/stdc++.h> using namespace std; ; ][]; in ...

  7. ubuntu13.10安装tomcat

    步骤: ubuntu :13.10(32bit) -->i586 jdk 1.7 安装JDK 步骤: 1.官网下载如下图: 2.点击java SE7,下载jdk1.7 3.点击接受,并下载对应的 ...

  8. day1-2基本数据类型

    /*5种基本数据类型 1,Undefined var a; a = undefined Undefined派生自Null 2,Null(本质属于object,单独细分出来的) var a = null ...

  9. Python数据类型-3 布尔类型

    布尔类型 对于错.0和1.正与反,都是传统意义上的布尔类型. 但在Python语言中,布尔类型只有两个值,True与False.请注意,是英文单词的对与错,并且首字母要大写,不能其它花式变型. 布尔值 ...

  10. 一个Android音频文本同步的英文有声读物App的开发过程

    转发: http://segmentfault.com/a/1190000003498111 “新概念英语”.“可可英语”.“亚马逊的audible有声书”.“扇贝听力”是我目前所知道的实现英文语音和 ...