<?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. Java空字符串与null的区别和判断字符串是否为空的方法

    Java空字符串与null的区别: 1.类型null表示的是一个对象的值,而并不是一个字符串.例如声明一个对象的引用,String a = null ;""表示的是一个空字符串,也 ...

  2. 恼人的Visual Studio 2010崩溃重启问题

    上周时Visual Studio 2010突然出现崩溃现象.在源文件修改只要一编译,马上就崩溃,而且还不弹出任何异常窗口,严重影响软件开发工作. google了无数解决方案 试了下面这些方法: 1)h ...

  3. Runtime 函数 Swizzling 改变OC方法的调度顺序

    首先加入一个小知识: SEL.Method.IMP的含义及区别 在运行时,类(Class)维护了一个消息分发列表来解决消息的正确发送.每一个消息列表的入口是一个方法(Method),这个方法映射了一对 ...

  4. PowerShell运行cmd命令

    1.使用.exe扩展名 2.使用 cmd /c "" 3.在 PowerShell v3 中有另一种选择来解决这个问题,只需在命令行的任意位置添加 –% 序列(两个短划线和一个百分 ...

  5. editplus如何设置不自动备份

    依次选择:工具,参数设置,文件(默认展开的,要缩回),然后看右边“保存文件时创建备份”,前面的框不要打勾,应用,确定

  6. Android源码是这样搞到的(图解)

    Android学习到一定程度,就一定要多读代码多思考,Android源码就是很好的学习材料,本文就是把Android的源码下载下来.我们知道Android的源码是用Git这个分布式版本号控制工具管理的 ...

  7. AWS RDS 使用笔记

    创建VPC安全组 添加VPC子网 创建RDS子网组 创建RDS参数组 创建MySQL实例 查看RDS终端节点 使用 MySQL 监视器与数据库实例上的数据库连接 安装mysql client $ su ...

  8. Spring MVC中如何传递对象参数

    springController: @Controller @RequestMapping("/user") public UserController extends BaseC ...

  9. 【腾讯Bugly干货分享】总结一个技术总监的教训和经验

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/Ry-G0Nikh6m-h3ZVC2cLyQ 导语 20 ...

  10. hdu 2027 统计元音

    统计元音 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...