购物车加减库存以及多选框的选择实现改变总价 

{__NOLAYOUT__}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="__STATIC__/index_style/js/jquery-2.2.0.min.js" ></script>
</head>
<body>
    <table border="1">
        <tr>
            <th>
            全选/全不选<br>
            <input type="checkbox" id="choose">
            </th>
            <th>商品图片</th>
            <th>商品名称</th>
            <th>商品单价</th>
            <th>商品数量</th>
            <th>商品小计</th>
        </tr>
        
        {volist name="data" id="v" key="k"}
            <tr>
                <td><input type="checkbox" class="cho"></td>
                <td><img src="__STATIC__/uploads/{$v.goods_img}" width="100" height="100"></td>
                <td>{$v.goods_name}</td>
                <td>{$v.goods_price}</td>
                <td>
                    <button type="button" class="jia">+</button>
                    <span>{$v.num}</span>
                    <button type="button" class="jian">-</button>
                </td>
                <td class="count_price">{$v.count_price}</td>
            </tr>
        {/volist}
    </table>

    总价：￥<span id="zongjia">0</span>
</body>
</html>
<script>

//多选框的点击事件
$('.cho').click(function(){
    sum_price();
})


//计算总价
function sum_price(){
    var sum=0
    var obj = $("input[class=cho]");
    for (var i = 0; i < obj.length; i++) {
        if(obj[i]['checked']){
            sum+=Number($(obj[i]).parents("tr").find('.count_price').text());
        }
    }
    $("#zongjia").text(sum);
}


//加号事件
$(".jia").click(function(){
    //单价
    var one_price = Number($(this).parent().prev().text());
    //计算数量
    var num = Number($(this).next()[0]['textContent']);
    num = num+1;
    //数量替换
    $(this).next().text(num)
    //小计
    xiaoji = num*one_price;
    //替换
    $(this).parent().next().text(xiaoji)
    sum_price()
    
})

//减号事件
$(".jian").click(function(){
    //单价
    var one_price = Number($(this).parent().prev().text());
    //计算数量
    var num = Number($(this).prev()[0]['textContent']);
    num = num-1 <= 0 ? 1: num-1;
    //数量替换
    $(this).prev().text(num)
    //小计
    xiaoji = num*one_price;
    //替换
    $(this).parent().next().text(xiaoji)
    sum_price()
    
})
</script>

 

posted @ 2021-12-08 17:31  王越666  阅读(78)  评论(0)    收藏  举报