JQuery 购物车案例

本文介绍用JQuery实现购物车案例相关功能

界面如下

主要功能为：

1.单选全选按钮 当单选按钮全选中时全选按钮也被选中，选中商品高亮效果

2.商品数量++ -- 功能，商品数量输入框功能 删除商品功能。

3.单个商品小计，总商品数量计算，总价计算。

4.清空购物车及删除选中商品。

一.全选功能

 //1  全选功能  
    $('.checkall').change(function () {
        var check = $(this).prop('checked')
        if (check) {
            //   如果全选被选中 那么所有的单选按钮都被选中  ---判断条件 checked 
            $('.j-checkbox').prop('checked', true)
            $('.checkall').prop('checked', true)
            //   如果全选没被选中  那么所有的单选都需要取消选中
        } else {
            $('.j-checkbox').prop('checked', false)
            $('.checkall').prop('checked', false)
        }
        total();
    })

二.单选功能，选中商品高亮

//2  单选功能  
    $('.j-checkbox').change(function () {
        // 获取单选按钮个数
        var j_checkbox = $('.j-checkbox').length
        // 获取被选中的单选按钮个数 
        var j_checkboxed = $('.j-checkbox:checked').length
        //  单选按钮的个数 如果跟 单选按钮选中的个数相等     那么表示所有的单选按钮都被选中    全选按钮选中 
        if (j_checkbox === j_checkboxed) {
            $('.checkall').prop('checked', true)
            //  只要有一个单选按钮没被选中  那么全选按钮不被选中 
        } else {
            $('.checkall').prop('checked', false)
        }
        // 选中商品高亮
        if ($(this).is(':checked')) {
            $(this).parents('.cart-item').addClass('check-cart-item')
        } else {
            $(this).parents('.cart-item').removeClass('check-cart-item')
        }
        total();
    })

3.数量++功能

//3  数量++  功能
    // 绑定事件找到input让input的val值++
    // 然后再赋给input
    $('.increment').click(function () {
        var num = $(this).siblings('.itxt').val() * 1;
        num++;
        $(this).siblings('.itxt').val(num)
        // 单价小计
        var price = $(this).parents('.cart-item').find('.p-price').text().substr(1) * 1
        // 保留两位小数
        var singlePrice = (price * num).toFixed(2)
        $(this).parents('.cart-item').find('.p-sum').text('￥' + singlePrice)
        total();
    })

4.数量--功能

// 4  数量--  功能
    $('.decrement').click(function () {
        var num = $(this).siblings('.itxt').val() * 1;
        num == 1 ? num = 1 : num--;
        $(this).siblings('.itxt').val(num)
        // 单价小计
        var price = $(this).parents('.cart-item').find('.p-price').text().substr(1) * 1
        // 保留两位小数
        var singlePrice = (price * num).toFixed(2)
        $(this).parents('.cart-item').find('.p-sum').text('￥' + singlePrice)
        total();
    })

5.删除功能

 // 5  删除功能
    $('.p-action a').click(function () {
        // 弹出确认框 如果返回值为真就删除
        var flag = window.confirm('真的要删除吗？')
        if (flag) {
            $(this).parents('.cart-item').slideUp(500, function () {
                this.remove()
                total();
            })
        }
    })

6.商品数量输入框数据改变功能

 // 6  输入框数据改变 功能 
    $('.itxt').change(function () {
        var num = $(this).val() * 1
        var price = $(this).parents('.cart-item').find('.p-price').text().substr(1) * 1
        if (isNaN(num)) {
            alert('请输入数字！')
            $(this).val(1)
        }
        if (num <= 0) {
            alert('数量最小为1！')
            $(this).val(1)
        }
        // 再次获取 否则会保留之前计算结果
        num = $(this).val() * 1
        // 保留两位小数
        var singlePrice = (price * num).toFixed(2)
        $(this).parents('.cart-item').find('.p-sum').text('￥' + singlePrice)
        total();
    })

7.清空购物车功能

 // 7 清空购物车功能
    $('.operation .clear-all').click(function () {
        $('.cart-warp').hide(500, function () {
            $('.cart-warp').empty()
        })
    })

8.删除选中商品功能

 // 8 删除选中商品
    $('.operation .remove-batch').click(function () {
        var j_checkbox = $('.j-checkbox').length
        var j_checkboxed = $('.j-checkbox:checked').length
        if (j_checkbox != j_checkboxed) {
            $('.j-checkbox').each(function (index, ele) {
                if ($(this).is(':checked')) {
                    $(this).parents('.cart-item').slideUp(200, function () {
                        $(this).parents('.cart-item').remove()
                    })
                }
            })
            total();
        } else {
            $('.cart-warp').hide(500, function () {
                $('.cart-warp').empty()
            })
        }
    })

封装一个函数计算商品数量和总价

 // 封装一个函数计算商品总价和商品数量
    function total() {
        var totalPrice = 0;
        var totalSum = 0;
        $('.cart-item').each(function (index, ele) {
            if ($('.cart-item .j-checkbox:checked')) {
                var price = $(this).find('.p-sum').text().substr(1) * 1
                totalPrice += price
                var sum = $(this).find('.itxt').val() * 1
                totalSum += sum
            }
        })
        $('.price-sum em').text(totalPrice.toFixed(2))
        $('.amount-sum em').text(totalSum)
    }
    // 直接调用 进来就计算

    total();