python-Web-django-商城-购物车商品加减

最新推荐文章于 2022-05-20 18:43:51 发布

donghuichi9301

最新推荐文章于 2022-05-20 18:43:51 发布

阅读量270

点赞数

文章标签： python javascript ViewUI

原文链接：http://www.cnblogs.com/person1-0-1/p/11391005.html

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>lili</title>
     <script src="js/jQuery-1.8.2.min.js"  type="text/javascript"></script>
</head>
<body>
<table>
    <tr>
        <td><input type="checkbox" id="allCheck">全选</td>
        <td>商品名称</td>
        <td>单价</td>
        <td>数量</td>
        <td>小计</td>
        <td>操作</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="singleCheck"></td>
        <td>女装</td>
        <td>100</td>
        <td class="smallnum"><span class="plus2">-</span><input type="text" value="1" size="1" class="num"><span class="plus">+</span></td>
        <td class="smallMoney">100</td>
        <td><a href="javascript:;"  class="del">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"  class="singleCheck"></td>
        <td>男装</td>
        <td>50</td>
        <td class="smallnum"><span class="plus2">-</span><input type="text" value="1"  size="1" class="num"><span class="plus">+</span></td>
        <td class="smallMoney">50</td>
        <td><a href="javascript:;" class="del">删除</a></td>
    </tr>
</table>
<div>共<span class="totalNum">0</span>件商品，共<span class="totalPrice">0</span>元</div>
</body>
</html>
<!-- 输入 全选，单选，+，-，删除 -->
<!-- 输出 小计，总件数，总数量 -->
<!-- 函数 smallMoney() ,total(),allCheck() -->
<script>
//小计函数
function smallMoney(arg,p){
    // 输入jq对象和+-
    var num = arg.val()
    if(p=='+'){
        num ++;
    };
    if(p=='-'){
        num --;
    };
    arg.val(num);
    // 获取单价
    var smallP = arg.parent().prev().text();
    // 小计
    arg.parent().next().text(smallP*num)
};
//总件数，总数量函数
function total(){
    // 输入
    var totalNum = 0;
    var totalPrice = 0;
    // 遍历singleCheck
    $('.singleCheck').each(function(){
            if($(this).is(':checked')){
                num_Num += Number($(this).parent().parent().find('.smallnum .num').val());
                num_Price += Number($(this).parent().parent().find('.smallMoney').text())
            }
    });
    // 修改总件数和总数量
    $('.totalNum').text(num_Num);
    $('.totalPrice').text(num_Price)
};
//全选函数
function allCheck(){
    if($(t).is(':checked')){
                $('.singleCheck').prop("checked", true)
        }else{
                $('.singleCheck').prop("checked", false)
        };
};
// 点击全选
$('#allCheck').click(function(){
    allCheck();
    total();
});
// 点击单选
$('.singleCheck').click(function(){
       total();
});
// 点击+
$('.plus').click(function(){
    singlePrice($(this).prev(),'+');
    total()
});
// 点击-
$('.plus2').click(function(){
    singlePrice($(this).next(),'-');
    total()
});
// 点击删除
$('.del').click(function(){
    $(this).parent().parent().remove();
    total()
})
</script>

转载于:https://www.cnblogs.com/person1-0-1/p/11391005.html

donghuichi9301

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
python-Web-django-商城-购物车商品加减

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-sca...
复制链接

扫一扫