购物车的功能——JS源码

简介: 购物车的功能——JS源码

  此CSS的对应的是“购物车的功能——界面源码”的内容和“购物车的功能——CSS源码”的内容,希望大家不要乱

$(function(){
  //点击复选框全选或全不选效果
    $("#allCheckBox").click(function(){
        var checked=$(this).is(":checked");
        $(".cart_td_1").children().attr("checked",checked);
    });
    //判断是否全选
    function ifAllChecked(){
        var checkedBoxs=$(".cart_td_1").children();
        var sum=checkedBoxs.size();
        var k=0;
        checkedBoxs.each(function(index,dom){
            if($(dom).is(":checked")) k++;
        });
        if(k==sum){
            $("#allCheckBox").attr("checked",true);
        }else{
            $("#allCheckBox").attr("checked",false);
        }
    }
    ifAllChecked();//页面加载完后运行
    //单选判断
    $(".cart_td_1").children().click(function(){
        ifAllChecked();
    });
    
  //计算总价与小计
    function productCount(){
        var $tr=$("#shopping").find("tr[id]");
        var summer=0;
        var integral=0;
        $tr.each(function(i,dom){
            var num=$(dom).children(".cart_td_6").find("input").val();//商品数量
            var price=num*$(dom).children(".cart_td_5").text();//商品小计
            $(dom).children(".cart_td_7").html(price);//显示商品小计
            summer+=price;//总价
            integral+=$(dom).children(".cart_td_4").text()*num;//积分
        });
        $("#total").text(summer);
        $("#integral").text(integral);
    }
    productCount();//页面加载完后运行
  
    //商品增加减少,flag为true时增加,flag为false时减少
    function changeNumber(dom,flag){
        var $input = $(dom).parent().find("input");
        var value = $input.val();
        if(flag){
            value++;
        }else{
            value--;
            if(value<=0){
                value=1;
                alert("宝贝数量必须大于0");
            }
        }
        $input.val(value);
        productCount();
    };
    //点击增加
    $(".cart_td_6").find("img[alt='minus']").click(function(){changeNumber(this,false);});
    //点击减少
    $(".cart_td_6").find("img[alt='add']").click(function(){changeNumber(this,true);});
    
    //点击删除
    $(".cart_td_8").find("a").click(function(){
        $(this).parent().parent().prev().remove();//删除前一tr
        $(this).parent().parent().remove();//删除当前tr
        productCount();
    });
    //点击删除所选
    $("#deleteAll").click(function(){
        $("#shopping").find("tr[id]").each(function(i,e){
            var $tr=$(e);
            var checked=$tr.children(".cart_td_1").children().is(":checked");
            if(checked){
                $tr.prev().remove();
                $tr.remove();
            }
        });
        productCount();
    });
});


相关文章
|
10天前
|
JavaScript
JS实现简单的打地鼠小游戏源码
这是一款基于JS实现简单的打地鼠小游戏源码。画面中的九宫格中随机出现一个地鼠,玩家移动并点击鼠标控制画面中的锤子打地鼠。打中地鼠会出现卡通爆破效果。同时左上角统计打地鼠获得的分数
25 1
|
2天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
19 1
|
8天前
|
JavaScript
JS趣味打字金鱼小游戏特效源码
hi fish是一款打字趣味小游戏,捞出海里的鱼,捞的越多越好。这款游戏用于电脑初学者练习打字。初学者可以根据自己的水平设置游戏难度。本段代码可以在各个网页使用,有需要的朋友可以直接下载使用,本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码!
15 3
|
10天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
19 4
|
10天前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能,界面简洁实用,是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
18 2
|
9天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
27 0
html5+three.js公路开车小游戏源码
|
9天前
|
JavaScript
JS趣味打字金鱼小游戏特效源码
hi fish是一款打字趣味小游戏,捞出海里的鱼,捞的越多越好。这款游戏用于电脑初学者练习打字。初学者可以根据自己的水平设置游戏难度。本段代码可以在各个网页使用,有需要的朋友可以直接下载使用,本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码!
18 0
JS趣味打字金鱼小游戏特效源码
|
11天前
|
JavaScript
js实现的精美彩色tab选项卡切换特效源码
js实现的精美彩色tab选项卡切换特效源码是一段基于JS实现的文件夹tab选项卡切换效果,拥有彩色、单色两种选择,点击标签选项卡可实现相应的变色效果,非常有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
20 2
|
11天前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画,js循环动画,简单的画面设计。非常丝滑有意思,欢迎对此代码感兴趣的朋友前来下载参考。
22 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
95 2