简介 目录 评价 推荐
  • 蓝天飞翔的翅膀 2018-05-11

    //用jquery写了一遍 

    $(function(){

    //全选

    var $checkAll= $(".check-all");

    var $check=$(".check");

    var $checkOne=$(".check-one");

    var $selectedTotal=$("#selectedTotal");

    var $priceTotal=$("#priceTotal");

    var $selectedViewList=$("#selectedViewList");

    var $selected=$("#selected");

    var $foot=$("#foot");

    var tr=$("#cartTable").find("tbody").find("tr");

    var $deleteAll=$("#deleteAll");

    var $deleteOne=$("#cartTable").find(".delete");

    var $countInput=$(".count-input");

    var $price=$(".price");

    var indexs=0;

    $checkAll.change(function(){

    if($(this).is(':checked')){

    $check.prop("checked",true);

    indexs=$checkOne.length;

    }else{

    $check.prop("checked",false);

    indexs=0;

    }

    totol();

    })

    //单选

    $checkOne.change(function(){

    if($(this).is(':checked')){

    indexs++;

    }else{

    indexs--;

    }

    if(indexs==$checkOne.length){

    $checkAll.prop("checked",true);

    }

    if($(this).is(':checked')==false){

    $checkAll.prop("checked",false);

    }

    totol();

    })

    //计算

    function totol(){

    var price=0;

    var seleted=0;

    var htmlStr='';

    for(var i=0;i<tr.length;i++){

    if($(tr[i]).find(".check-one").is(':checked')){

    $(tr[i]).addClass("on");

    price+=parseFloat($(tr[i]).find(".subtotal").html());

    seleted+=parseInt($(tr[i]).find(".count-input").val())

       htmlStr+='<div><img src="' + $(tr[i]).find("img").attr("src") + '"><span class="del" index="' + i + '">取消选择</span></div>';

    }else{

    $(tr[i]).removeClass("on");

    }

    }

    $selectedTotal.html(seleted);

    $priceTotal.html(price.toFixed(2));

    $selectedViewList.html(htmlStr);


    if($selectedTotal.html()==0){

               $foot.removeClass("show");  

            }

    }


    $selected.on("click",function(){

    if($selectedTotal.html()!=0){

    $foot.toggleClass("show")

    }

    })


    $selectedViewList.on("click",".del",function(){

    var index=$(this).attr("index");

    $checkOne.eq(index).trigger("click");

    $(this).parent("div").empty();


    })


    //删除全部

    $deleteAll.on("click",function(){

    if($selectedTotal.html()!=0){

    var conf = confirm('确定删除吗?');

                if(conf){

                for(var i=0;i<tr.length;i++){

    if($(tr[i]).find(".check-one").is(':checked')){

    $(tr[i]).empty();


    }


    }

                }

    }


    })

    //删除单个

    $deleteOne.on("click",function(){

    var confs = confirm('确定删除吗?');

    if(confs){

    $(this).closest("tr").empty();

    }

    })



    for(var i=0;i<tr.length;i++){

    //加减数量

    $(tr[i]).on("click",function(e){

    e = e || window.event;

                var el = e.toElement;

                var cls = $(el).prop("className");

       var num=parseInt($(this).find(".count-input").val());

                switch (cls) {

                    case 'add':

                    num++

                        $(this).find(".count-input").val(num);

                    $(this).find(".reduce").html("-");

                    Calculation($(this));

                    totol();

                        break;

                    case 'reduce':

                    if(num>1){

                    num--;

                    $(this).find(".count-input").val(num);

                    }

                    if(num<=1){

                    $(this).find(".reduce").html("")

                    num=1

                    }

                    Calculation($(this));

                    totol();

                    break;

               }

              

               

    })



    //输入数量

    $(tr[i]).find(".count-input").on("keyup",function(){

    var value=parseInt($(this).val());

    if(isNaN(value) || value<=1){

    value=1;

    $(this).closest("tr").find(".reduce").html("");

    }

    $(this).val(value);

    if(value>1){

    $(this).closest("tr").find(".reduce").html("-");

    }

    Calculation($(this).closest("tr"));

    totol();

    })


    }


    //单行计算

    function Calculation(tr){

    var price=parseFloat(tr.find(".price").html());

    var num=parseInt(tr.find(".count-input").val());

    var totolCont=price*num

    var totol=parseFloat(totolCont.toFixed(2));

    tr.find(".subtotal").html(totol);

    }

    //初始全选

    $checkAll.prop("checked",true);

    $checkAll.trigger("click");


    })


    3赞 · 3采集
  • 慕粉1414189941 2017-05-03
    1
    截图
    0赞 · 0采集
  • 很好吃先森 2016-10-11
    55级
    0赞 · 0采集
  • 古文0 2016-03-21
    购物车功能
    0赞 · 0采集
  • 无心水2012 2015-07-26
    购物车-demo
    0赞 · 0采集
  • 无心水2012 2015-07-26
    淘宝网购物车
    截图
    0赞 · 0采集
  • 倪商啊商倪 2014-02-07
    封面的大狗真可爱
    截图
    1赞 · 2采集
数据加载中...
开始学习 免费