jQuery实现购物车结算

最新推荐文章于 2022-02-10 22:42:02 发布
无边的小宇宙
最新推荐文章于 2022-02-10 22:42:02 发布
阅读量642
点赞数
本文链接：https://blog.csdn.net/qq_38308895/article/details/73440890
版权
<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>淘宝购物车页面</title>
    <link href="css/myCart.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>
<div id="header"><img src="images/taobao_logo.gif" alt="logo" /></div>
<div id="nav">您的位置：<a href="#">首页</a> &gt; <a href="#">我的淘宝</a> &gt; 我的购物车</div>
<div id="navlist">
    <ul>
        <li class="navlist_red_left"></li>
        <li class="navlist_red">1. 查看购物车</li>
        <li class="navlist_red_arrow"></li>
        <li class="navlist_gray">2. 确认订单信息</li>
        <li class="navlist_gray_arrow"></li>
        <li class="navlist_gray">3. 付款到支付宝</li>
        <li class="navlist_gray_arrow"></li>
        <li class="navlist_gray">4. 确认收货</li>
        <li class="navlist_gray_arrow"></li>
        <li class="navlist_gray">5. 评价</li>
        <li class="navlist_gray_right"></li>
    </ul>
</div>

<div id="content">
   <form action="" method="post" name="myform">
       <table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">        
            <tr>
                <td class="title_1"><input id="allCheckBox" type="checkbox" value=""/>全选</td>
                <td class="title_2" colspan="2">店铺宝贝</td>
                <td class="title_3">获积分</td>
                <td class="title_4">单价（元）</td>
                <td class="title_5">数量</td>
                <td class="title_6">小计（元）</td>
                <td class="title_7">操作</td>
            </tr>
            <tr>
                <td colspan="8" class="line"></td>
            </tr>
            <tr>
                <td colspan="8" class="shopInfo">店铺：<a href="#">纤巧百媚时尚鞋坊</a>    卖家：<a href="#">纤巧百媚</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
            </tr>
            <tr id="product1">
                <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1"/></td>
                <td class="cart_td_2"><img src="images/taobao_cart_01.jpg" alt="shopping"/></td>
                <td class="cart_td_3"><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br />
                    颜色：棕色 尺码：37<br />
                    保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
                <td class="cart_td_4">5</td>
                <td class="cart_td_5">138.00</td>
                <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_1" type="text"  value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
                <td class="cart_td_7"></td>
                <td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
            </tr>

            <tr>
                <td colspan="8" class="shopInfo">店铺：<a href="#">香港我的美丽日记</a>    卖家：<a href="#">lokemick2009</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
            </tr>
            <tr id="product2">
                <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2" /></td>
                <td class="cart_td_2"><img src="images/taobao_cart_02.jpg" alt="shopping"/></td>
                <td class="cart_td_3"><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a><br />
                    保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td>
                <td class="cart_td_4">12</td>
                <td class="cart_td_5">265.00</td>
                <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_2" type="text"  value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
                <td class="cart_td_7"></td>
                <td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
            </tr>

            <tr>
                <td colspan="8" class="shopInfo">店铺：<a href="#">实体经营</a>    卖家：<a href="#">林颜店铺</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
            </tr>
            <tr id="product3">
                <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3"/></td>
                <td class="cart_td_2"><img src="images/taobao_cart_03.jpg" alt="shopping"/></td>
                <td class="cart_td_3"><a href="#">蝶妆海?蓝清滢粉底液10#（象牙白）</a><br />
                    保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td>
                <td class="cart_td_4">3</td>
                <td class="cart_td_5">85.00</td>
                <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_3" type="text"  value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
                <td class="cart_td_7"></td>
                <td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
            </tr>

            <tr>
                <td colspan="8" class="shopInfo">店铺：<a href="#">红豆豆的小屋</a>    卖家：<a href="#">taobao豆豆</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
            </tr>
            <tr id="product4">
                <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product4"/></td>
                <td class="cart_td_2"><img src="images/taobao_cart_04.jpg" alt="shopping"/></td>
                <td class="cart_td_3"><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a><br />
                    保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
                <td class="cart_td_4">12</td>
                <td class="cart_td_5">12.00</td>
                <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_4" type="text"  value="2" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
                <td class="cart_td_7"></td>
                <td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
            </tr>

            <tr>
                <td  colspan="3"><a id="deleteAll" href="javascript:void(0);"><img src="images/taobao_del.jpg" alt="delete"/></a></td>
                <td colspan="5" class="shopend">商品总价（不含运费）：<label id="total" class="yellow"></label> 元<br />
                    可获积分 <label class="yellow" id="integral"></label> 点<br />
                    <input name=" " type="image" src="images/taobao_subtn.jpg" /></td>
            </tr>        
       </table>
    </form>

</div>
</body>
</html>
<script type="text/javascript">
    $(function () {
        checks();
        del();
        dellall();
        minus();
        add();
        xiaoji();
        Totalpoint();
        TotalPrice();
        submits();
    })

    
    
//全选
    function checks() {
         var allcheckeds=document.getElementById("allCheckBox");
         allcheckeds.οnclick=function () {
            var checkeds=document.getElementsByName("cartCheckBox");
            for (var i=0;i< checkeds.length;i++){
                checkeds[i].checked=allcheckeds.checked;
            }
        }
    }
//删除
    function del() {
        $(".cart_td_8").children().click(function () {
            alert("确定要删除吗？")
            $(this).parent().parent().prev().remove();
            $(this).parent().parent().remove();
            TotalPrice();
            Totalpoint();
        })
    }
//删除所选
    function dellall() {
        $("[alt=delete]").click(function () {
            alert("确定要删除吗？")
            aaa();
            Totalpoint();
            TotalPrice();
        })
    }
    function aaa() {
        var checkedes=document.getElementsByName("cartCheckBox");
        for(var i=0;i<checkedes.length;i++){
            if (checkedes[i].checked==true){
                checkedes[i].parentElement.parentElement.previousElementSibling.remove();
                checkedes[i].parentElement.parentElement.remove();
            }
        }
    }
//数量
    var Nums;
    var price;
    var points;
    var ad=0;
    var totalPrice=0;
    var totalPoints=0;
    /*减*/
    function minus() {
        $(".cart_td_6").children("[ alt=minus]").click(function () {
            ad = Number($(this).next().val());
            ad = ad - 1;
            if (ad < 1) {
                ad = 1;
            }
            $(this).next().val(ad);
            xiaoji();
            Totalpoint();
            TotalPrice();
        })

    }
    /*加*/
    function add() {
        $(".cart_td_6").children("[alt=add]").click(function () {
            ad= Number($(this).prev().val());
            ad=ad+1;
            $(this).prev().val(ad);
            xiaoji();
            Totalpoint();
            TotalPrice();
        })
    }

//商品总积分
    function Totalpoint() {
        totalPoints=0;
        $(".cart_td_4").each(function (i,obj) {
            points= Number($(this).text());
            Nums=Number($(".num_input").eq(i).val());
            totalPoints+=points*Nums;
        })
        $("#integral").text(totalPoints);
    }
//商品总价
    function TotalPrice() {
        totalPrice=0;
        $(".cart_td_5").each(function (i,obj) {
            price=Number($(this).text());
            Nums=Number($(".num_input").eq(i).val());
            totalPrice+=price*Nums;
        })
        $("#total").text(totalPrice);
    }
//小计
    var xiaojiPrice=0;
    function xiaoji() {
        $(".cart_td_5").each(function (i,obj) {
            price=Number($(this).text());
            Nums=Number($(".num_input").eq(i).val());
            xiaojiPrice=price*Nums;
            $(".cart_td_7").eq(i).text("￥"+xiaojiPrice);
        })
    }

//下单
    function submits() {
        $("[ type=image]").click(function () {
            alert("下单成功！");
        })
    }
    
    
</script>
无边的小宇宙
关注
0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现购物车结算

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> meta http-equiv="Content-Type" cont
复制链接

扫一扫