【案例一】移动端购物车基本功能实现，具体操作类似淘宝购车。

还是直接上图：

      

 

这个效果图很酷炫~  有个坑纪念下，本来想用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);
}