JS-购物车

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <script src="jquery-3.2.1.min.js"></script>

</head>

<body>

    <div id="main">

        <table class="table table-striped">

            <thead>

            <tr>

                <th scope="col">标号</th>

                <th scope="col">名称</th>

                <th scope="col">价格</th>

                <th scope="col">数量</th>

                <th scope="col">小计</th>

                <th scope="col">操作</th>

            </tr>

            </thead>

            <tbody>

            <tr>

                <th scope="row">

                    <input type="checkbox" name="ck" class="ck">

                </th>

                <td>商品一号</td>

                <td>9.91</td>

                <td>

                <button class="btn-up">+</button>

                    <input type="text" name="num" style="width: 30px" value="1">

                    <button class="btn-down">-</button>

                </td>

                <td class="subtotal">9.91</td>

                <td><button class="btn-danger">删除</button></td>

            </tr>

            <tr>

                <th scope="row">

                    <input type="checkbox" name="ck" class="ck">

                </th>

                <td>商品二号</td>

                <td>9.9</td>

                <td>

                    <button class="btn-up">+</button>

                    <input type="text" name="num" style="width: 30px" value="1">

                    <button class="btn-down">-</button>

                </td>

                <td class="subtotal">9.9</td>

                <td><button class="btn-danger">删除</button></td>

            </tr>

            <tr>

                <th scope="row">

                    <input type="checkbox" name="ck" class="ck">

                </th>

                <td>商品三号</td>

                <td>100.23</td>

                <td>

                    <button class="btn-up">+</button>

                    <input type="text" name="num" style="width: 30px" value="1">

                    <button class="btn-down">-</button>

                </td>

                <td class="subtotal">100.23</td>

                <td><button class="btn-danger">删除</button></td>

            </tr>

            </tbody>

        </table>

        <button id="qx">全选</button>

        <button id="qbx">全不选</button>

        <button id="fx">反选</button>

        <button id="plsc">批量删除</button>

        <p style="float: right">

            总共购买<span id="counter">0</span> 件 ;支付总金额:<span id="total">0.00</span>￥

        </p>

    </div>

</body>

</html>

<script>

    //加

    $(".btn-up").click(function () {

        var num = $(this).next().val();

        num++;

        var price = $(this).parent().prev().text();

        var subTotal = price * num;

        $(this).next().val(num);

        $(this).parent().next().html(subTotal.toFixed(2));

        $(this).parent().siblings(":first").find('.ck').prop("checked","checked");

        computed();

    });

    //减

    $(".btn-down").click(function () {

        var num = $(this).prev().val();

        if(num>1){

            num--;

        }

        var price = $(this).parent().prev().text();

        var subTotal = price * num;

        $(this).prev().val(num);

        $(this).parent().next().text(subTotal.toFixed(2));

        computed();

    });

    //计算总金额

    function computed(){

        var total = 0;

        var ele = $("input[name='ck']:checked");

        var counter = ele.length;

        ele.each(function (index,v) {

            //

            total += parseFloat( $(v).parent().parent().find('.subtotal').text());

        });

        $("#counter").html(counter);

        $("#total").html(total).toFixed(2);

    }

    $(".ck").click(function () {

        computed();

    });

    //全选

    $("#qx").click(function () {

        var ck = $("input[name='ck']");

        for(var i=0;i<ck.length;i++){

            ck[i].checked = true;

        }

        computed();

    });

    //全不选

    $("#qbx").click(function () {

        var ck = $("input[name='ck']");

        for(var i=0;i<ck.length;i++){

            ck[i].checked = false;

        }

        computed();

    });

    //反选

    $("#fx").click(function () {

        var ck = $("input[name='ck']");

        for (var i=0;i<ck.length;i++){

            if(ck[i].checked){

                ck[i].checked = false;

            }else{

                ck[i].checked = true;

            }

        }

        computed();

    });

    $(".btn-danger").click(function () {

        $(this).parent().parent().empty();

    });

    $("#plsc").click(function () {

        var ele = $("input[name='ck']:checked");

        for(var i=0;i<ele.length;i++){

            //$(ele[i]).parent().parent().remove();

            $(ele[i]).parent().parent().remove();

        }

        computed();

    });

</script>
巴特西

JS-购物车

最新文章

热门文章
