<!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-购物车的更多相关文章

  1. 简单实用angular.js购物车功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. js购物车计算价格

    <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam ...

  3. vue.js购物车

    vue.js https://cn.vuejs.org/v2/guide/ 简单购物车 <html> <head> <script src="https://c ...

  4. js 购物车的实现

    购物车原理:创建一个构造函数,把涉及到的项目写成方法,然后把这些方法放到构造函数的原型对象上,通过按钮绑定,调用原型对象上的方法,实现对涉及项目的改变 html代码: <!DOCTYPE htm ...

  5. 原生JS 购物车及购物页面的cookie使用

    ////////////////////////////////////购物页面 <!DOCTYPE html><html lang="en"><he ...

  6. JS购物车编辑

    实现了:第一件商品的加减实现了:全选/全不选(使用prop而不是attr)实现了:删除(遮罩层) 未实现:第二件商品的删除未实现:小计及应付款额的初始化(写死的) 计算小数乘法时,要先乘100 < ...

  7. js 购物车中，多件商品数量加减效果修改，实现总价随数量加减改变

    <!DOCTYPE html> <html> <head> <meta charset=UTF-8 /> <title>无标题文档</ ...

  8. js 购物车的数量加减，对应的总价也随机变化

    html相关的源码: <div class="goods_num clearfix"> <div class="num_name fl"> ...

  9. Vue node.js商城-购物车模块

      一.渲染购物车列表页面 新建src/views/Cart.vue获取cartList购物车列表数据就可以在页面中渲染出该用户的购物车列表数据 data(){   return {      car ...

  10. shoppingCart.js

    ylbtech-JavaScript-util: shoppingCart.js 购物车脚本 1.A,JS-效果图返回顶部   1.B,JS-Source Code(源代码)返回顶部 1.B.1,m. ...

随机推荐

  1. Redis 分布式锁使用不当，酿成一个重大事故，超卖了100瓶飞天茅台！！！(转)

    基于Redis使用分布式锁在当今已经不是什么新鲜事了. 本篇文章主要是基于我们实际项目中因为redis分布式锁造成的事故分析及解决方案.我们项目中的抢购订单采用的是分布式锁来解决的,有一次,运营做了一 ...

  2. Java基础之Scanner类中next()与nextLine()方法的区别

    java中使用Scanner类实现数据输入十分简单方便,Scanner类中next()与nextLine()都可以实现字符串String的获取,所以我们会纠结二者之间的区别. 其实next()与nex ...

  3. art 模式 android runtime

    空间换时间的概念. art:程序在安装时需要预编译读取,将代码转换为机器码 好处:程序运行时,无需时时转换,运行速度快 : 缺点:安装时间稍长,由于转换机器码,所以占用略高的存储空间.

  4. oracle锁表问题处理

    文章转载自:http://blog.itpub.net/31397003/viewspace-2142672/ "ORA-00054: 资源正忙, 但指定以 NOWAIT 方式获取资源, 或 ...

  5. 使用GDataXML生成、修改XML文档-陈棚

    使用GDXML生成XML文档的步骤如下. 1.调用GDataXMLNode的elementWithName:方法创建GDataXMLElement对象,对象作为XML文档的根元素. 2.调用GData ...

  6. NSSet和NSMutableSet - By吴帮雷

    1.NSSet的使用 [NSSet setWithSet:(NSSet *)set]; 用另外一个set对象构造 [NSSet setWithArray:(NSArray *)array];用数组构造 ...

  7. DelayQueue延迟队列-实现缓存

    延迟阻塞队列DelayQueue DelayQueue 是一个支持延时获取元素的阻塞队列, 内部采用优先队列 PriorityQueue 存储元素, 同时元素必须实现 Delayed 接口:在创建元素 ...

  8. Solution -「多校联训」排水系统

    \(\mathcal{Description}\)   Link.   在 NOIP 2020 A 的基础上,每条边赋权值 \(a_i\),随机恰好一条边断掉,第 \(i\) 条段的概率正比于 \(a ...

  9. Solution -「NOI 2016」「洛谷 P1587」循环之美

    \(\mathcal{Description}\)   Link.   给定 \(n,m,k\),求 \(x\in [1,n]\cap\mathbb N,y\in [1,m]\cap \mathbb ...

  10. 【Azure 应用服务】部署Jar到App Service for Linux，因启动命令路径配置错误而引起:( Application Error 问题

    问题描述 App Service for Linux 资源创建完成后,通过FTP方式把 .jar包(logdemo.jar)包上传到 /site/wwwroot/ 文件夹后,在App Service的 ...