SOURCE

// 第一步  ajax 获取 购物车列表
var shopItems = []; //
//假设的ajax
// $.ajax({
//     url: '获取购物车的列表信息的接口',
//     method: 'get',
//     type: 'json',
//     success: function (data) {
//         shopItems = data.list
//     }
// })
//
shopItems = [{
  id: 1,//商品id
  price: 100,//商品价格
  rebate: 1,//折扣
  num: 1,//数量
  reduce: 0,// 单件减多少
  max_num: 1,//最大数量
  selected: true,//是否选中
  img: 'http://img5.mtime.cn/mg/2016/09/22/094949.91079705.jpg',//商品图片
  title: '标题1'//商品名称
},
{
  id: 2,
  price: 80,
  rebate: 0.9,
  num: 2,
  max_num: 5,
  reduce: 10,
  selected: true,
  img: 'http://img5.mtime.cn/mg/2016/09/22/094949.91079705.jpg',
  title: '标题2'
},
{
  id: 3,
  price: 50,
  rebate: 0.8,
  num: 3,
  max_num: 10,
  selected: false,
  reduce: 0,
  img: 'http://img5.mtime.cn/mg/2016/09/22/094949.91079705.jpg',
  title: '标题3'
},
]

//渲染列表
var str = '';

shopItems.map(item => {
    str += [
    '<div class="item" aid="'+item.id+'">',
        '<input type="checkbox"  class="select_box">',
        '<img class="item_img" src="'+item.img+'">',
        '<span class="title">'+item.title+'</span>',
        '<span class="price">￥'+item.price+'</span>',
        '<div class="num"><span class="less">-</span>',
            '<input type="text" class="num_input" value="'+item.num+'">',
            '<span class="more">+</span>',
        '</div>',
        '<span class="total">￥0</span>',
        '<div class="opt">',
            '<div class="del">删除</div>',
            '<div class="move">移入收藏夹</div>',
        '</div>',
    '</div>'].join('')
})
$('.list').html(str)

//事件绑定 + -

$('.list').on('click', '.more', function(){
    var parent = $(this).parents('.item');
    var input  = parent.find('.num_input');
    var val = input.val();
    var aid = parent.attr('aid');
    var item_obj = shopItems.filter(item=>item.id == aid)[0];
    if(val*1 < item_obj.max_num ){
        item_obj.num++;
        input.val(item_obj.num);
        calc_price(aid);
    }else{
        alert('超过库存上限')
    }
})

$('.list').on('click', '.less', function(){
    var parent = $(this).parents('.item');
    var input  = parent.find('.num_input');
    var aid = parent.attr('aid');
    var item_obj = shopItems.filter(item=>item.id == aid)[0];
    if(item_obj.num > 0 ){
        item_obj.num--;
        input.val(item_obj.num);
        calc_price(aid);
    }else{
        alert('超过库存上限')
    }
})

$('.list').on('change', '.num_input', function(){
    var parent = $(this).parents('.item');
    var aid = parent.attr('aid');
    var input  = parent.find('.num_input');
    var val = $(this).val();
    var item_obj = shopItems.filter(item=>item.id == aid)[0];
    if(val*1 > item_obj.max_num){
        alert('超过库存上限')
        input.val(item_obj.max_num)
        item_obj.num = item_obj.max_num
    }else{
        item_obj.num = val*1;
    }
    calc_price(aid);
})

$('.list').on('change', '.select_box', function(){
    var parent = $(this).parents('.item');
    var aid = parent.attr('aid');
    var item_obj = shopItems.filter(item=>item.id == aid)[0];
    item_obj.selected = $(this).prop('checked')
    
    if(!item_obj.selected){
        $('.selected_all input').prop('checked', false)
    }
    var all_flag = true;
    shopItems.forEach(item=>{
        if(all_flag && !item.selected){
            all_flag = false;
        }
    })
    if(all_flag){
       $('.selected_all input').prop('checked', true)
    }
    calc_price(aid)
})

$('.selected_all input').change(function(){
    var status = $(this).prop('checked');
    $('.select_box').prop('checked',status);

    shopItems.forEach(item=>{
        item.selected = status;
        calc_price(item.id)
    })
})

//事件删除
$('.list').on('click', '.del', function(){
    var parent = $(this).parents('.item');
    var aid = parent.attr('aid');
    parent.remove();
    var arr = shopItems.filter(item=> item.id != aid);
    shopItems = arr;
    shopItems.forEach(item=>{
        calc_price(item.id)
    })
})



//价格计算

function calc_price(aid){
    var total = 0;
    var reduce_num = 0;
    shopItems.forEach(item=>{
        var tmp = (item.price - item.reduce) *item.num* item.rebate;
        var tmp_reduce =item.price * item.num - tmp;
        if(item.id == aid){
            var item_dom = $('.item[aid="'+aid+'"]');
            item_dom.find('.total').html('￥'+tmp);
        }
        if(item.selected){
            total += tmp;
            reduce_num = tmp_reduce;
        }
    })
    $('.main_price span').html('￥'+total);
    $('.main_reduce span').html('￥'+reduce_num);
}

//全局计算一次价格
shopItems.forEach(item=>{
    calc_price(item.id);
    if(item.selected){
        $('.item[aid="'+item.id+'"]').find('.select_box').attr('checked', true)
    }
})

<div class="list"></div>
<div class="selected_all">全选: <input type="checkbox">    </div>
<div class="main_price">总价：<span>0</span></div>
<div class="main_reduce">促销减价：<span>0</span></div>

.list {
  width: 100%;
}

.item {
  display: flex;
  
  align-items: center;
  margin: 10px 0;
}

.select_box {
  display: block;
}

.item_img {
  width: 100px;
  height: 80px;
  object-fit: cover;
  margin: 0 10px;
}

.title {
  flex: 1;
  margin: 0 10px;
}

.price {
  margin： 0 10px;
}

.num {
  width: 100px;
  display: flex;
  margin: 0 10px;
  align-items: center
}

.num input {
  flex: 1;
  display: block;
  width: 50px;
  
}
.num span {
  display:block;
  border: 1px solid red;
  width: 20px;
  height: 20px;
  cursor:pointer;
  text-align: center;
}

.total {
  margin: 0 10px;
}

.opt {
  margin: 0 10px;
  display: flex;
  flex-direction: column;
}