仿淘宝结算功能_纯jQuery实现模仿淘宝购物车结算

jQuery仿淘宝购物车结算代码、Demo是一款实用的电子商务网站购物车结算的功能、并且带有金额计算功能、支持多个店铺多个产品、单个店铺单个产品、话不多少、先上图

全局的checkbox选中和未选中的样式

var $allCheckbox = $(´input[type="checkbox"]´),     //全局的全部checkbox
    $wholeChexbox = $(´.whole_check´),
    $cartBox = $(´.cartBox´),                       //每个商铺盒子
    $shopCheckbox = $(´.shopChoice´),               //每个商铺的checkbox
    $sonCheckBox = $(´.son_check´);                 //每个商铺下的商品的checkbox
$allCheckbox.click(function () {
    if ($(this).is(´:checked´)) {
        $(this).next(´label´).addClass(´mark´);
    } else {
        $(this).next(´label´).removeClass(´mark´)
    }
});

店铺有一个未选中、全局全选按钮取消对勾、若店铺全选中、则全局全选按钮打对勾

$shopCheckbox.each(function () {
    $(this).click(function () {
        if ($(this).is(´:checked´)) {
            //判断：店铺全选中，则全局全选按钮打对勾。
            var len = $shopCheckbox.length;
            var num = 0;
            $shopCheckbox.each(function () {
                if ($(this).is(´:checked´)) {
                    num  ;
                }
            });
            if (num == len) {
                $wholeChexbox.prop("checked", true);
                $wholeChexbox.next(´label´).addClass(´mark´);
            }

            //店铺下的checkbox选中状态
            $(this).parents(´.cartBox´).find(´.son_check´).prop("checked", true);
            $(this).parents(´.cartBox´).find(´.son_check´).next(´label´).addClass(´mark´);
        } else {
            //否则，全局全选按钮取消对勾
            $wholeChexbox.prop("checked", false);
            $wholeChexbox.next(´label´).removeClass(´mark´);

            //店铺下的checkbox选中状态
            $(this).parents(´.cartBox´).find(´.son_check´).prop("checked", false);
            $(this).parents(´.cartBox´).find(´.son_check´).next(´label´).removeClass(´mark´);
        }
        totalMoney();
    });
});

确定按钮、移除商品

$(´.dialog-sure´).click(function () {
    $order_lists.remove();
    if($order_content.html().trim() == null || $order_content.html().trim().length == 0){
        $order_content.parents(´.cartBox´).remove();
    }
    closeM();
    $sonCheckBox = $(´.son_check´);
    totalMoney();
})

以上是部分代码、更多代码可以下载源代码查看、下面是Demo的下载地址

纯jquery实现模仿淘宝购物车结算源代码下载链接: 仿淘宝结算功能 密码: eid1