jQuery-实现简易购物车
Published in：2020-08-16 |

实现简易购物车,删除,全选,合计

jQery实现简易购物车

实现效果图

HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script src="jquery-1.11.1.js"></script>

    <link rel="stylesheet" href="my_css.css">
</head>
<body>
<div id="box">
    <table id="t">
        <thead>
        <tr>
            <th width="100px"><label>
                <input type="checkbox" class="check_all_check"> 全选</label></th>
            <th>商品</th>
            <th width="100px">单价</th>
            <th>数量</th>
            <th width="100px">小计</th>
            <th width="100px">操作</th>
        </tr>
        </thead>

        <tr>
            <td class="checkbox"><input type="checkbox"></td>
            <td class="goods"><img src="1.jpg" alt="图片加载失败"><span>Casio/卡西欧 EX-TR350</span></td>
            <td class="price">5999.88</td>
            <td class="count"><span class="reduce"></span>
                <input type="button" class="reduce" value="-">
                <input class="count-input" type="text" value="1" size="1px">
                <input type="button" class="add" value="+">
            </td>
            <td class="subtotal">5999.88</td>
            <td class="operation"><a class="delete" href="javascript:void(0)">删除</a></td>
        </tr>
        <tr>
            <td class="checkbox"><input type="checkbox"></td>
            <td class="goods"><img src="2.jpg" alt="图片加载失败"><span>Canon/佳能 PowerShot SX50 HS</span></td>
            <td class="price">3888.50</td>
            <td class="count"><span class="reduce"></span>
                <input type="button" class="reduce" value="-">
                <input class="count-input" type="text" value="1" size="1px">
                <input type="button" class="add" value="+">
            </td>
            <td class="subtotal">3888.50</td>
            <td class="operation"><a class="delete" href="javascript:void(0)">删除</a></td>
        </tr>
        <tr>
            <td class="checkbox"><input type="checkbox"></td>
            <td class="goods"><img src="3.jpg" alt="图片加载失败"><span>Sony/索尼 DSC-WX300</span></td>
            <td class="price">1428.50</td>
            <td class="count"><span class="reduce"></span>
                <input type="button" class="reduce" value="-">
                <input class="count-input" type="text" value="1" size="1px">
                <input type="button" class="add" value="+">
            </td>
            <td class="subtotal">1428.50</td>
            <td class="operation"><a class="delete" href="javascript:void(0)">删除</a></td>
        </tr>
        <tr>
            <td class="checkbox"><input type="checkbox"></td>
            <td class="goods"><img src="4.jpg" alt="图片加载失败"><span>Fujifilm/富士 instax mini 25</span></td>
            <td class="price">640.60</td>
            <td class="count"><span class="reduce"></span>
                <input type="button" class="reduce" value="-">
                <input class="count-input" type="text" value="1" size="1px">
                <input type="button" class="add" value="+">
            </td>
            <td class="subtotal">640.60</td>
            <td class="operation"><a class="delete" href="javascript:void(0)">删除</a></td>
        </tr>
        <tr>
            <td colspan="5">
                <div id="foot">
                    <label><input type="checkbox" class="check_all_check"> 全选</label>
                    <a id="deleteAll" href="javascript:void(0)">删除</a>
                </div>
                <div id="selected">已选商品<span id="selectedTotal">0</span>件<span id="hidden">︽</span></div>
                <div>合计：￥<span id="priceTotal">0</span></div>
            </td>
            <td>

                <div onclick="getTotal();">结 算</div>

            </td>
        </tr>
    </table>
</div>

<script src="my_js.js"></script>


</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
table {
    margin: 0 auto;
    border: 1px #CADEFF solid;
    text-align: center;
    border-spacing: 0;
}
a {
    color: #666;
    text-decoration: none;
}
th {
    background: #e2f2ff;
}
td {
    text-align: center;
    padding: 10px;
    color: #444;
}
#box table th, #box table td {
    border: 1px solid #CADEFF;
    border-spacing: 0;
}
.goods span {
    width: 180px;
    margin-top: 30px;
    text-align: left;
    float: left;
}
img {
    width: 100px;
    height: 80px;
    margin-right: 10px;
    float: left;
}
#foot {
    float: left;
    margin-right: 300px;
}
#selected {
    float: left;
}
.count .add, .count .reduce {
    height: 25px;
    width: 17px;
    background: #f0f0f0;
    text-align: center;
    line-height: 25px;
    color: #444;
}
.count input {
    height: 25px;
    line-height: 25px;
    border: 1px solid #aaa;
    color: #343434;
    text-align: center;
    background-color: #fff;
}
.price {
    width: 130px;
}
.count {
    width: 90px;
}

基于jQuery的js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
//实现小计功能
$(".reduce").click(function () {
    var count1 = $(this).next().val();
    var count2 = Number(count1) - 1;  //修改后的数量
    if (count2 === 0) {
        $(this).attr('disabled', 'disabled');
        alert("商品个数不能为0");
        $(this).parent().parent().remove();
    }
    $(this).next().val(count2); // 修改数量
    var price = Number($(this).parent().prev().text()); //获取单个价格
    var subtatal = Number($(this).parent().next().text()); //获取原始的默认价格
    var subtatal1 = count2 * price; //计算后的价格
    $(this).parent().next().text(subtatal1.toFixed(2));//修改价格
    getP()
});
$(".add").click(function () {
    var count1 = $(this).prev().val();
    var count2 = Number(count1) + 1;  //修改后的数量
    $(this).prev().val(count2);   //修改数量
    var price = Number($(this).parent().prev().text()); //获取单个价格
    var subtatal = Number($(this).parent().next().text()); //获取原始的默认价格
    var subtatal1 = count2 * price; //计算后的价格
    $(this).parent().next().text(subtatal1.toFixed(2)); //修改价格

    getP()
});
//实现删除功能
$(".delete").click(function () {
    $(this).parent().parent().remove();
    getP()
});
// 全选或不选
$(".check_all_check").click(function () {
    var checked = $(".checkbox>input");     //获取所有的物品选择框
    console.log(checked);
    var sum = checked.size();             //记录选择框的大小
    var attr1 = $(this).prop('checked');  //获取全选框的属性
    checked.prop('checked', attr1);
    getP()
});
//单选
$(".checkbox").click(function () {
    getP()
});
//选择删除功能
$("#deleteAll").click(function () {
    //选出已选择的需要删除的行
    //遍历购物车的物品行数
    var plist = $(".checkbox>input"); //获取购物车中的选择框
    for (var i = 0; i < plist.size(); i++) {
        if ($(plist[i]).is(":checked")) {
            $($(plist[i]).parent().parent()).remove()  //被选择的执行删除整行
        }
    }
    getP()
});
//遍历 计算总价与小计
function getP() {
    var plist = $(".checkbox>input"); //获取chekbox的选择框,用来遍历
    var count = 0;       //已选择数量
    var number = 0;      //合计价格
    for (var i = 0; i < plist.size(); i++) {
        // console.log($(plist[i]));
        if ($(plist[i]).is(":checked")) {  //被选择
            var subtotal = $($(plist[i]).parent().parent().children()[4]).text(); //获取单行的价格
            var count1 = $($($(plist[i]).parent().parent().children()[3]).children('input')[1]).val(); //获取单行的数量
            count += Number(count1);
            number += Number(subtotal);
        }
    }
    var selected = $("#selectedTotal");     //获取已选择
    // console.log(selected);
    selected.text(count);
    var priceTotal = $("#priceTotal");   //获取已选择物品的价格
    // console.log(priceTotal);
    priceTotal.text(number.toFixed(2));
}

jQuery
Prev:
Django-实现简易员工操作
Next:
JavaScript-实现简易购物车

    • Copyright © 2022 - 2024 16778738 | Powered by “> |