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

//代码如下

<!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. 有个网站秒破mdb访问密码

    http://tools.bugscaner.com/crackmdb/网站

  2. SqlServer游标操作

    CLOSE orderNum_02_cursordeallocate orderNum_02_cursorDECLARE orderNum_02_cursor cursor SCROLL for se ...

  3. ApacheBench(ab)压力测试工具

    服务器负载太大而影响程序效率也是很常见的,Apache服务器自带有一个叫AB(ApacheBench)的工具,可以对服务器进行负载测试 基本用法: ab  -n 全部请求数 -c 并发数测试url 注 ...

  4. Meaven搭建springboot项目

    1.创建一个简单的maven project项目 2.项目目录结构 **注意启动类的位置: 3.pom.xml 配置jar包 <parent> <groupId>org.spr ...

  5. vue.js 第十课-第十六课

    第十课: http://note.youdao.com/noteshare?id=25b5ba45286464856f21eb4b6b391ecd&sub=19C4429995384F72BD ...

  6. 自定义Redis作为Session存储服务提供

    之前看网上介绍可使用Redis自定义Session托管,使用第三方的Harbour.RedisSessionStateStore GitHub:https://github.com/TheCloudl ...

  7. 算法-leetcode-65-Valid Number

    算法-leetcode-65-Valid Number 上代码: # coding:utf-8 __author__ = "sn" """Valida ...

  8. 一 Spring概述

    知识点概要: 1 SpringIOC入门(XML).Spring的Bean管理.Spring属性注入 2 SpringIOC注解方式.Spring的AOP开发(XML) 3 Spring的AOP注解开 ...

  9. StringBuffer调整空间

    在无法估算字符串大小情况下,可以使用StringBuffer的trimToSize()方法调整到合适大小.

  10. Python学习笔记007

    赋值运算符 num+=1 num=num+1 num-=1 num=num-1 num*=2 num=num*2 num/=2 num=num/2 num//=2 num=num//2 num%=2 ...