JQuery购物车案例代码共享「附源码下载」

　　这篇文章主要为大家详细介绍了jquery实现购物车基本功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下！（文章末尾附带源码，需要的可以下载）

<script>
$(function () {
    //选中后添加背景颜色
    $('.jcheck').on('change', function () {
        if ($(this).prop('checked') == true) {
            $(this).parent().parent('.menu').css('background', '#f5f5f5')
        } else {
            $(this).parent().parent('.menu').css('background', '')
        }
    })
    $('.allcheck').on('change', function () {
        //另一个全选按钮也要选上
        $('.jcheck,.allcheck').prop('checked', $(this).prop('checked')) //和全选一样的状态
        //选中后添加背景颜色
        if ($(this).prop('checked') == true) {
            $('.menu').css('background', '#f5f5f5')
        } else {
            $('.menu').css('background', '')
        }
    })
    // 单个按钮
    $('.jcheck').on('change', function () {
        if ($('.jcheck:checked').length === $('.jcheck').length) {
            $('.allcheck').prop('checked', true)
        } else {
            $('.allcheck').prop('checked', false)
        }
    })
    // 减
    $('.number .jian').on('click', function () {
        var index = $(this).siblings('.num').val();
        index--;
        if (index < 1) { //如果小于1就 不往下执行了
            return false;
        }
        $(this).siblings('.num').val(index);

        var p = $(this).parent().siblings('.danjia').find('span').text()
        $(this).parent().siblings('.xiaoji').find('span').text(p * $(this).siblings('.num')
            .val())
        getSunm()
    })
    //加
    $('.number .jia').on('click', function () {
        var index = $(this).siblings('.num').val();
        index++;
        $(this).siblings('.num').val(index);

        var p = $(this).parent().siblings('.danjia').find('span').text()
        $(this).parent().siblings('.xiaoji').find('span').text(p * $(this).siblings('.num')
            .val())
        getSunm()
    })
    // 删除
    $('.delete').on('click', 'a', function () {
        $(this).parent().parent().remove()
        console.log(1);
    })
    function getSunm() {
        var zShu = 0; //计算总件数
        var zJia = 0; //计算总价
        $('.menu .num').each(function (i, ele) {
            zShu += parseInt($(ele).val());
        })
        $('.menu .xiaoji span').each(function (i, ele) {
            zJia += parseFloat($(ele).text())
        })
        $('.end .z-num').text(zShu)
        $('.end .z-jia').text(zJia.toFixed(2))
    }
})
</script>

源码下载：购物车.zip