<!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. JavaScript检查Date对象是否为Invalid Date

    使用Date()构造日期对象,如果传入非日期格式的字符串,仍然能构造出Date对象. 在chrome控制台 >var date = new Date("hello"); &g ...

  2. 自定义 RestTemplate 异常处理 （转）

    转自:https://ethendev.github.io/2018/11/06/RestTemplate-error-handler/ 一些 API 的报错信息通过 Response 的 body返 ...

  3. Html 项目使用自定义字体文件问题

    感谢大佬:https://zhidao.baidu.com/question/652711582735059245.html 1.首先在项目过程中新建文件夹fonts将准备好的ttf字体文件复制该文件 ...

  4. Nginx中的 location 匹配和 rewrite 重写跳转

    Nginx中的location匹配和rewrite重写跳转 1.常用的Nginx正则表达式 2.location 3.rewrite 4.rewrite实例 1.常用的Nginx正则表达式: ^ :匹 ...

  5. docker平时使用异常记录

    GPU主机重启后,启动使用GPU的容器报错 docker: Error response from daemon: Unknown runtime specified nvidia. 解决办法:修改/ ...

  6. 直接引入vue.js和使用vue脚手架的区别？

    脚手架工具搭建的项目是把Vue作为一个模块(如CommonJS规范的模块)对待,在源码中引入vue模块,最终需要用构建工具(如webpack)载入模块,编写代码需要require('vue'). 而直 ...

  7. Spring 初始化流程

    开始 在SpringIOC中,前面讲述了如何配置BeanDefinition和如何注册BeanDefinition,但是这些知识容器初始化的一部分,在AbstractApplicationContex ...

  8. 模块random+os+sys+json+subprocess

    模块random+os+sys+json+subprocess 1. random 模块   (产生一个随机值) import random 1 # 随机小数 2 print(random.rando ...

  9. Solution -「Gym 102798K」Tree Tweaking

    \(\mathcal{Description}\)   Link.   给定排列 \(\{p_n\}\),求任意重排 \(p_{l..r}\) 的元素后,将 \(\{p_n\}\) 依次插入二叉搜索树 ...

  10. 自学linux（修改中文）STEP2

    登录身份 最好用普通身份登录,而不是root用户,因为root用户权限太高,容易引起安全问题. 不显示中文 安装系统后,在图形化界面设置中文还是不生效.查询资料后如下: 1. 查看 linux 系统下 ...