效果图：

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);

    }

})

购物车功能：使用jQuery实现购物车全选反选，单选，商品增删，小计等功能的更多相关文章

  1. jquery、js全选反选checkbox

    操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...

  2. Jquery 1.8全选反选删除选中项实现

    JQuery1.6以后,Prop的出现,让1.6以下的全选反选效果全部失效了.以下是修正后的版本: 全选反选效果: $(".checkbox").click(function () ...

  3. jQuery实现checkbox全选反选及删除等操作

    1.list.html 说明:用checkbox数组Check[]存放每一行的ID值 <div id="con"> <table width="100% ...

  4. JQuery一句话实现全选/反选

    $("#checkAll").click(function () { if (this.checked) {     $("input[name='checkbox']& ...

  5. jquery 书写全选反选功能

    书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. jQuery实现的全选、反选和不选功能

    适用于网页多选后需要进行批量操作的场景(如批量删除等).如有问题希望大家可以指正.谢谢~~ HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮 ...

  7. jQuery实现的全选、反选和获取当前所有选中的值功能

    链接: jQuery实现的全选.反选和获取当前所有选中的值功能 <ul id="list"> <li><label><input type ...

  8. jquery实现全选/反选功能

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  9. JavaScript 实现全选 / 反选功能

    JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...

  10. jQuery设置checkbox全选（区别jQuery版本）

    jQuery设置checkbox全选在网上有各种文章介绍,但是为什么在我们用他们的代码的时候就没有效果呢? 如果你的代码一点错误都没有,先不要急着怀疑人家代码的正确性,也许只是人家跟你用的jQuery ...

随机推荐

  1. 安卓app开发-05-Android xml布局详细介绍

    安卓app开发-05-Android xml布局详细介绍 虽然说有 墨刀,墨客 这些图形化开发工具来做 Android 的界面设计,但是我们还是离不开要去学习做安卓原生app,学习 xml 布局还是必 ...

  2. GIT:如何管理本机的多个ssh密钥（多个远程仓库账号）

    最近在学习git,首先推荐一个个人认为很不错的git教程,学习后,从git新手变成了git入门了,仍需继续努力. 廖老师的git学习教程(其他git基础知识点,本篇博客就不做介绍了,自己看教程学习吧, ...

  3. springAOP学习笔记

    目录 基础 引用 AOP方法 使用 xml配置 注解配置 基础 什么是aop? 把我们程序重复的代码抽取出来,在需要执行的时候,使用动态代理的技术,在不修改源码的 基础上,对我们的已有方法进行增强. ...

  4. 贪心算法和动态规划[zz]

    http://www.cnblogs.com/asuran/archive/2010/01/26/1656399.html 贪心算法 1．贪心选择性质 所谓贪心选择性质是指所求问题的整体最优解可以通过 ...

  5. 机器学习入门线性回归 岭回归与Lasso回归(二)

    一 线性回归(Linear Regression ) 1. 线性回归概述 回归的目的是预测数值型数据的目标值,最直接的方法就是根据输入写出一个求出目标值的计算公式,也就是所谓的回归方程,例如y = a ...

  6. iOS8模糊效果UIVisualEffectView的使用

    iOS8模糊效果UIVisualEffectView的使用 效果: 源码: // // ViewController.m // EffectView // // Created by XianMing ...

  7. Python学习---装饰器的学习1210

    装饰器的基础 学习前提: 作用域 + 函数的理解 + 闭包  [学习,理解] 代码编写原则: 对修改开放对扩展开放 装饰器本质上是一个函数,该函数用来处理其他函数,它可以让其他函数在不需要修改代码的前 ...

  8. facebook开源的代码审核工具phabricator

    主页地址:http://phabricator.org/

  9. shell基础学习

    1. #! /bin/bash #设置只读变量,只读变量不可修改myUrl="http://www.baidu.com"readonly myUrl #删除变量,unset不能删除 ...

  10. http协议要素

    1)网络节点: 2)通信信道: 3)操作命令: 4)数据载体: