zoukankan      html  css  js  c++  java
  • jQuery实现购物车多物品数量的加减+总价计算

     
     
    <!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">
    <head>
    <title>jQuery实现购物车多物品数量的加减+总价计算</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script>
    $(function(){
    $(".add").click(function(){
    var t=$(this).parent().find('input[class*=text_box]');
    t.val(parseInt(t.val())+1)
    setTotal();
    })
    $(".min").click(function(){
    var t=$(this).parent().find('input[class*=text_box]');
    t.val(parseInt(t.val())-1)
    if(parseInt(t.val())<0){
    t.val(0);
    }
    setTotal();
    })
    function setTotal(){
    var s=0;
    $("#tab td").each(function(){
    s+=parseInt($(this).find('input[class*=text_box]').val())*parseFloat($(this).find('span[class*=price]').text());
    });
    $("#total").html(s.toFixed(2));
    }
    setTotal();
     
    })
    </script>
    </head>
    <body>
    <table id="tab">
    <tr>
    <td>
    <span>单价:</span><span class="price">1.50</span>
    <input class="min" name="" type="button" value="-" />
    <input class="text_box" name="" type="text" value="1" />
    <input class="add" name="" type="button" value="+" />
    </td>
    </tr>
    <tr>
    <td>
    <span>单价:</span><span class="price">3.95</span>
    <input class="min" name="" type="button" value="-" />
    <input class="text_box" name="" type="text" value="1" />
    <input class="add" name="" type="button" value="+" />
    </td>
    </tr>
    </table>
     
    <p>总价:<label id="total"></label></p>
    </body>
    </html>
  • 相关阅读:
    poj 1088 滑雪
    位运算与bitset
    hdu 4607 Park Visit
    树的直径
    codeforces 495D Sonya and Matrix
    German Collegiate Programming Contest 2015(第三场)
    BAPC 2014 Preliminary(第一场)
    Benelux Algorithm Programming Contest 2014 Final(第二场)
    E. Reachability from the Capital(tarjan+dfs)
    poj2104 K-th Number(划分树)
  • 原文地址:https://www.cnblogs.com/nin-w/p/5907485.html
Copyright © 2011-2022 走看看