還是直接上圖：

這個效果圖很酷炫~  有個坑紀念下，本來想用jquery-weui做的，然後各種倒騰，還是用css+div，媽耶！

關鍵核心的jquery語句控制：

//繫結全選的按鈕，讓所有購物車都選中，然後計算總數
$("#checkboxSum").on('click',function(){
    if($(this).prop('checked')){
        //讓每個checkbox都被選中，attr不管用，使用prop
        $("[name='checkbox1']").prop("checked",'true');//全選
        //遍歷陣列，進行選中和數量的合計和彙總
        addSum();
    }else{
        $("[name='checkbox1']").removeAttr("checked");//取消全選
        //遍歷陣列，進行選中和數量的合計和彙總
        addSum();
    }
})

//迴圈繫結事件，購物車增加，減少和是否選中該商品
for (var i = 1; i < 3; i++) {
    $(".add" + i).bind("click", {index: i}, clickHandlerAdd);
    $(".redu" + i).bind("click", {index: i}, clickHandlerRedu);
    $("#s"+i).bind("change",{index:i},clickHandlerSum);
}

//選中購物車計算價格總數
function clickHandlerSum(event){
    var i = event.data.index;
    addSum();  //計算選中購物車總價合計
    findChecked();  //檢測購物車是否全選和所選個數
}

//增加商品的數量處理函式
function clickHandlerAdd(event) {
    var i = event.data.index;
    var a = parseInt($(".count" + i).text());
    a++;
    $(".count" + i).text(a);
    if (a > 1) {
        $(".redu" + i).text("-");
    }
    var b= parseInt($(".price" + i).text());
    var sum = a*b;
    $(".sum"+i).text(sum);

    //遍歷陣列，進行選中和數量的合計和彙總
    addSum();
}
//減少商品的數量處理函式
function clickHandlerRedu(event) {
    var i = event.data.index;
    var a = parseInt($(".count" + i).text());
    if( a == 1 ){
        return;
    }
    if (a == 2) {
        $(this).text("").attr("readonly", true);
        a--;
        $(".count" + i).text(a);
    } else {
        a--;
        $(".count" + i).text(a);
    }
    var b= parseInt($(".price" + i).text());
    var sum = a*b;
    $(".sum"+i).text(sum);

    //遍歷陣列，進行選中和數量的合計和彙總
    addSum();
}
//計算選中購物車總價合計
function addSum(){
    var buySum=0;
    for(var j= 1; j<3;j++){
        if($("#s"+j).prop('checked')){
            //console.log(j);
            var s =parseInt($(".sum"+j).text());
            buySum = s+buySum;
        }
    }
    //計算選中購物車的數量和總價彙總
    $("#goBuySum").text(buySum);
}
//檢測購物車是否全選和所選個數
function findChecked(){
    var checkedSum = 0;  //記貨物被選中的數量
    for(var k=1;k<3;k++){
        if($("#s"+k).prop("checked"))
        checkedSum++;
    }
    //證明全選
    if(checkedSum ==2){
        $("#checkboxSum").prop('checked',true);
    }else{ //沒有全選
        $("#checkboxSum").prop('checked',false);
    }
    //設定購物的數量
    $("#buyCount").text(checkedSum);
}