<?php

session_start();

 ?>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<head>

<title>jQuery实现购物车多物品数量的加减+总价+删除计算</title>

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

<script>

$(function(){

    var _url = $('#siteurl').val();

    $('.delete').click(function(){

      var t=$(this).parent('td').parent('tr');

      var tt=$(this).parent('td').find('input[class*=text_box]');

      tt.val(0);

      setTotal();

      t.hide();

    });

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

        var t=$(this).parent('td').find('input[class*=text_box]');

        t.val(parseInt(t.val())+1);

        setTotal();

    }); 

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

        var t=$(this).parent('td').find('input[class*=text_box]');

        t.val(parseInt(t.val())-1)

        if(parseInt(t.val())<1){

            t.val(1);

        } 

    setTotal();

  });

  $('.text_box').keyup(function(){

    setTotal();

  });

  function setTotal(){

    var s=0;

    $("#tab td").each(function(){

      var numbers = parseInt($(this).find('input[class*=text_box]').val());

      if($.isNumeric(numbers))

      {

            numbers = parseInt(numbers);

      }else

     {

        numbers = 0;

     }

      $(this).find('input[class*=text_box]').val(numbers);

      s += numbers*parseFloat($(this).find('span[class*=price]').text()); 

        // bof 用ajax在_url中删除指定的购物车中$_SESSION相关信息

        var pid =$(this).find('input[class*=product_id]');

        $.ajax({

            url:_url,

      type: 'post',

            data:{proid : pid.val()},

            success: function(data){

                // 回应

            }

        });

        // end

    });

    $("#total").html(s.toFixed(2));

  }

 // setTotal(); 

});

</script>

</head>

<body>

<form action="./myform.php" method="post">

<input type="hidden" name="siteUrl" id="siteurl" value="siteUrl.php" />

<table id="tab">

<tr>

<td>

<span>单价:</span><span class="price">1.50</span>

<input class="product_id" type="hidden" name="product_id" value="value" />

<input class="min" name="" type="button" value="-" />

<input class="text_box" name="name2" type="text" value="1" />

<input class="add" name="" type="button" value="+" />

<a href="javascript:void(0);" class="delete">删除</a>

</td>

</tr>

<tr>

<td>

<span>单价:</span><span class="price">3.95</span>

<input class="min" name="" type="button" value="-" />

<input class="text_box" name="name1" type="text" value="1" />

<input class="add" name="" type="button" value="+" />

<a href="javascript:void(0);" class="delete">删除</a>

</td>

</tr>

</table>

<input type="submit" name="submit" value="submit" />

</form>

 总价：<label id="total"></label>

 <div id="product_id_value"><?php print_r($_SESSION); ?></div>

</body>

</html>

jQuery实现购物车多物品数量的加减+总价+删除计算的更多相关文章

  1. jQuery实现购物车多物品数量的加减+总价计算

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  2. JQuery购物车多物品数量的加减+总价计算

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Jquery实现购物车物品数量的加减特效

    今天网友翠儿在用Jquery实现购物车物品数量的加减特效的时候遇到问题来问我,我后来帮她解决了这个Jquery特效,现在把它整理出来分享给大家用,虽然功能比较简单,但是很实用. 主要包括了以下功能: ...

  4. jQuery实现购物车物品数量的加减

    基于jquery的一款代码,实现购物车数据的加减,在淘宝网.京东商城购物时时经常见到的一个功能,点击文本框两侧的“+”与“-”,就可以增加或减少文本框内的数字值,每次步长为1,当然这个是可以自己设置的 ...

  5. jquery实现input输入框点击加减数值随之变动

    <input class="addBtn min" type="button" value="-" /><input cl ...

  6. web框架实现购物车数量加减

    企业开发中经常是团队协作,每个人分配一个小的模块,比如说购物车模块,数量加减这一块人们首先想到的就是通过jquery实现,其实作为一个后端接口开发的程序猿也可以用自己更擅长的后端的逻辑代码来实现,那我 ...

  7. jQuery数字加减插件

    jQuery数字加减插件 我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数.本文 ...

  8. js jquery 权限单选 bug修改以及正确代码 购物车数量加减

    效果图废话不多直接上代码 用的avalon渲染,其实都是一样的 <div class="shop-arithmetic"> <a href="javas ...

  9. JQuery案例：购物车加减

    购物车加减 <head> <meta charset="UTF-8"> <title>加减购物车</title> <style ...

随机推荐

  1. ASP.NET- Repeater 嵌套

    我们有时候需要查找出父菜单下面全部的子菜单,然后根据子菜单的ID查找出该类别下面的全部新闻. 通常往往只知道父级菜单的ID,但不知道父级菜单下面有多少个子菜单,也不知道子菜单的ID 所以我们往往需要根 ...

  2. android安全问题（八）伪造短信（利用原生android4.0漏洞）

    导读:本文利用android4.0的一个原生漏洞来伪造短信.无须声明任何权限即可伪造发送方为任何号码的短信给用户. android4.0发布已经是很久很久很久很久以前的事情了,这个漏洞早就报了出来,之 ...

  3. Ubuntu 14.10安装SecureCRT 7.3

    Ubuntu 14.10下安装SecureCRT 7.3 1.软件准备 Ubuntu14.10 x64 SecureCRT7.3的版本:scrt-7.3.0-657.ubuntu13-64.x86_6 ...

  4. S2SH商用后台权限系统第三讲

    个位博友: 您好!今天我们做下登录页面,已经如何登录系统.我们的登录页面很简单,用户名.密码.验证码.下面首先描述下验证码的概念,验证码是为了防止机器人恶意登录.我们这里的验证码采用4位数字,当然你也 ...

  5. 真相：中国版BBB用USB连电脑没有盘符的根本原因分析

    很多网友在问:为什么中国版的装完驱动插上板子没有显示端口号和69M的盘符??楼主发现,在开机启动的时候,加载g_multi模块时出现错误提示 invalid argument.         Emb ...

  6. Java基础知识强化之IO流笔记44：IO流练习之 复制图片的 4 种方式案例

    1. 复制图片的 4 种方式案例: 分析: 复制数据,如果我们知道用记事本打开并能够读懂,就用字符流,否则用字节流. 通过该原理,我们知道我们应该采用字节流. 而字节流有4种方式,所以做这个题目我们有 ...

  7. Java并发（6）带返回结果的任务执行

    携带结果的任务 JDK5提供了有可返回值的任务的执行.java.util.concurrent中Callable与Futrue用以实现带返回值的任务执行. 使用Callable与Futrue与使用Ru ...

  8. struts1与struts2的区别

    Struts2其实并不是一个陌生的Web框架,Struts2是以Webwork的设计思想为核心,吸收了Struts1的优点,因此,可以认为Struts2是Struts1和Webwork结合的产物. 简 ...

  9. verilog中的function用法与例子

    函数的功能和任务的功能类似,但二者还存在很大的不同.在 Verilog HDL 语法中也存在函数的定义和调用. 1．函数的定义 函数通过关键词 function 和 endfunction 定义,不允 ...

  10. java Spring 在WEB应用中的实例化

    .前面讲解的都是通过直接读取配置文件,进行的实例化ApplicationContext AbstractApplicationContext app = new ClassPathXmlApplica ...