效果图：

html：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>模拟购物车功能-jq</title>

    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />

     <link rel="stylesheet" href="css/shopCart.css" />

    <script type="text/javascript" src="js/jquery-2.1.0.js" ></script>

</head>

<body>

    <table class="table">

        <tr>

            <th id="checkAll"><label><input type="checkbox" checked  />全选</label><button>删除</button></th>

            <th>商品名称</th>

            <th>商品价格(元)</th>

            <th>数目</th>

            <th>小计(元)</th>

            <th>操作</th>

        </tr>

        <tr>

            <td class="check"><label><input type="checkbox"  checked /></label></td>

            <td>商品名称1</td>

            <td class="price">22.50</td>

            <td><span class="sub">-</span><input type="text" value="1" class="num"/><span class="add">+</span></td>

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

            <td class="del"><button>删除</button></td>

        </tr>

        <tr>

            <td class="check"><label><input type="checkbox" checked /></label></td>

            <td>商品名称2</td>

            <td class="price">12.50</td>

            <td><span class="sub">-</span><input type="text" value="1" class="num"/><span class="add">+</span></td>

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

            <td class="del"><button>删除</button></td>

        </tr>

        <tr>

            <td class="check"><label><input type="checkbox" checked /></label></td>

            <td>商品名称3</td>

            <td class="price">110.40</td>

            <td><span class="sub">-</span><input type="text" value="1" class="num"/><span class="add">+</span></td>

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

            <td class="del"><button>删除</button></td>

        </tr>

        <tr>

            <td colspan="5" style="text-align: right;">总件数：<i id="numAll">0</i>件  &nbsp; &nbsp;   总计：<i id="total">0.00</i>元</td>

        </tr>

    </table>

    <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>

    <script src="js/shopCart.js" type="text/javascript" charset="utf-8"></script>

</body>

</html>

css样式：

*{

    margin:;

    padding:;

}

table th,table td,input{

    text-align: center;

}

table #checkAll{

    width: 150px;

}

table #checkAll label{

    cursor: pointer;

    background: url(../img/confirm.png) no-repeat center left;

    padding-left:10px;

}

 table .check label{

    cursor: pointer;

    background: url(../img/confirm.png) no-repeat center;

}

table #checkAll input, table .check input{

    visibility: hidden;

}

table input[type="text"]{

    width: 50px;

    overflow: hidden;

}

table span{

    display: inline-block;

    width: 20px;

    background: #8C8C8C;

    margin:0px 5px ;

    color: #FFFFFF;

    cursor: pointer;

}

js：

$(function() {

    // 全选

    $("#checkAll input").click(function() {

        var flag = $(this).prop("checked");

        if(flag) {

            $(".check label input").prop("checked", true);

            $("#checkAll label").css("background", "url(img/confirm.png) no-repeat center left");

            $(".check label").css("background", "url(img/confirm.png) no-repeat center");

        } else {

            $(".check label input").prop("checked", false);

            $("#checkAll label").css("background", "url(img/confirm_no.png) no-repeat center left");

            $(".check label").css("background", "url(img/confirm_no.png) no-repeat center");

        }

        counts();

        totalPrice();

    });

    //单选

    $(".check input").click(function() {

        var flag = $(this).prop("checked"); //获取当前input的状态

        var CL = $(".check input").length; //列表长度；

        var CH = $(".check input:checked").length; //列表中被选中的长度

        if(flag) {

            $(this).parent("label").css("background", "url(img/confirm.png) no-repeat center");

        } else {

            $(this).parent("label").css("background", "url(img/confirm_no.png) no-repeat center");

        }

        if(CL == CH) {

            $("#checkAll input").prop("checked", true);

            $("#checkAll label").css("background", "url(img/confirm.png) no-repeat center left");

        } else {

            $("#checkAll input").prop("checked", false);

            $("#checkAll label").css("background", "url(img/confirm_no.png) no-repeat center left");

        }

        counts();

        totalPrice();

    })

    //数目加

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

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

        var price = parseFloat($(this).parent().siblings(".price").text());

        num++;

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

        //      小计

        $(this).parent().siblings(".subtotal").text((price * num).toFixed(2));

        counts();

        totalPrice();

    })

    //数目减

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

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

        var price = parseFloat($(this).parent().siblings(".price").text());

        num--;

        if(num <= 0) {

            num = 0

        }

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

        //      小计

        $(this).parent().siblings(".subtotal").text((price * num).toFixed(2));

        counts();

        totalPrice();

    })

    //文本框脱里焦点处理

    $('.num').each(function(i) {

        $(this).blur(function() {

            let p = parseFloat($(this).parents('tr').find(".subtotal").text());

            let c = parseFloat(this.value);

            console.log(p*c);

            $(this).parents('tr').find(".subtotal").text((c * p).toFixed(2));

            counts();

            totalPrice();

        })

    })

    //单行删除

    $(".del button").click(function() {

        var flag = $(this).parent().siblings().find("input").prop("checked");

        if(flag) {

            if(confirm("是否确定删除")) {

                $(this).parents("tr").remove();

                var CL = $(".check input").length; //列表长度；

                if(CL == 0) {

                    $("#checkAll label input").prop("checked", false);

                    $("#checkAll label").css("background", "url(img/confirm_no.png) no-repeat center left");

                }

                counts();

                totalPrice();

            }

        }

    })

    //全删除

    $("#checkAll button").click(function() {

        var flag = $(this).prev().children().prop("checked");

        //           console.log(flag);

        if(flag) {

            if(confirm("是否确定删除")) {

                $(".check").parent().remove();

                var CL = $(".check input").length; //列表长度；

                if(CL == 0) {

                    $("#checkAll label input").prop("checked", false);

                    $("#checkAll label").css("background", "url(img/confirm_no.png) no-repeat center left");

                }

                counts();

                totalPrice();

            }

        }

    })

    //总价格

    totalPrice();

    function totalPrice() {

        var prices = 0;

        $('.check input:checked').each(function(i) {

            console.log()

            prices += parseFloat($(this).parents("tr").find('.subtotal').text());

        })

        $('#total').text(prices);

    }

    //总数目

    counts();

    function counts() {

        var sum = 0;

        $('.check input:checked').each(function(i) {

            sum += parseInt($(this).parents("tr").find('.num').val());

        })

        $('#numAll').text(sum);

    }

})

最新文章

  1. MySQL优化聊两句
  2. 安卓智能POS开单神器-成为零售批发商亲睐的生意帮手-pda销售扫描开单 现场结算打印凭据
  3. SubSonic3.0插件分页查询速度测试
  4. Understanding the Internal Message Buffers of Storm
  5. 数论学习笔记之解线性方程 a*x + b*y = gcd(a,b)
  6. jsQunit
  7. tcp/ip协议栈调用关系图
  8. 【POJ】2096 Collecting Bugs
  9. [转]使用 C 编写 Lua 模块
  10. 浅谈mysql mvcc
  11. 详解MYSQL数据库密码的加密方式及破解方法
  12. PuTTY + Xming 远程使用 Linux GUI
  13. transition过渡的趣玩
  14. Window 点击“X”关闭之后无法show
  15. YII重点文件
  16. Android-SD卡相关操作
  17. springboot整合微软的ad域，采用ldap的api来整合，实现用户登录验证、
  18. work-7.2
  19. 服务管理之samba
  20. 011 SpringSecurity的基本原理

热门文章

  1. java中字节流与字符流以及字节流多余字节问题
  2. Aspose.Pdf v8.4.1 发布
  3. 【Oracle】DBMS_STATS.GATHER_SCHEMA_STATS详解
  4. composer随笔
  5. 3.5星|《刷屏：视频时代的风传法则》：YouTube热门视频回顾与分析
  6. ZT 设计模式六大原则（2）：里氏替换原则
  7. 中石油大学统考（大学英语B）押题笔记
  8. memcached源码剖析4：并发模型
  9. 理解活在Iphone中的那些App （四）
  10. 关于C++学习笔记