伤心大学生 2021-11-28 20:32 采纳率: 50%
浏览 69
已结题

jq购物车:实现勾选复选框后才计入总计

没学js,js都是网上扒的,想知道要怎么改才能实现勾选复选框后才计入总计QAQ

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0
        }

        .biankuang {
            border-collapse: collapse;
            margin: 0 auto;
        }

        tr td,
        th {
            border: 2px solid black;
            padding: 10px;
        }

        .jian,
        .jia,
        .shuliang {
            width: 25px;
        }
    </style>
</head>

<body>
    <table class="biankuang">
        <thead>
            <tr>
                <th>全选<input type="checkbox" class="checkall"></th>
                <th>书名</th>
                <th>数量</th>
                <th>单价</th>
                <th>状态</th>
                <th>库存</th>
                <th>小计</th>
            </tr>
        </thead>
        <tr>
            <td><input type="checkbox" class="checksin"></td>
            <td>《C语言程序设计》</td>
            <td>
                <button class="jian">-</button>
                <input type="text" class="shuliang" value="0">
                <button class="jia">+</button>
            </td>
            <td>69.00</td>
            <td>有货</td>
            <td><span class="kucun">10</span></td>
            <td class="xiaoji">0.00</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checksin"></td>
            <td>《Web前端开发基础》</td>
            <td>
                <button class="jian">-</button>
                <input type="text" class="shuliang" value="0">
                <button class="jia">+</button>
            </td>
            <td>48.00</td>
            <td>有货</td>
            <td><span class="kucun">10</span></td>
            <td class="xiaoji">0.00</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checksin"></td>
            <td>《高等数学(上册)》</td>
            <td>
                <button class="jian">-</button>
                <input type="text" class="shuliang" value="0">
                <button class="jia">+</button>
            </td>
            <td>31.00</td>
            <td>有货</td>
            <td><span class="kucun">10</span></td>
            <td class="xiaoji">0.00</td>
        </tr>
        <tr>
            <td colspan="6">总计</td>
            <td class="total">0.00</td>
        </tr>
    </table>
    <script type="text/javascript">
        $(".checkall").on("click", function () {
            var flag = $(this)[0].checked;
            $(".checksin").each(function () {
                $(this)[0].checked = flag;
            })
            result()
        });
        $(".checksin").on("click", function () {
            var i = 0;
            $(".checksin").each(function () {
                if ($(this)[0].checked == false) {
                    $(".checkall")[0].checked = false;
                } else {
                    i += 1;
                    if (i == $(".checksin").length) {
                        $(".checkall")[0].checked = true;
                    }
                }

            })
            result()
        });
        $(".jia").click(function () {
            var num = $(this).prev().val();
            if (num == 10) {
                return;
            }

            $(this).prev().val(parseInt(++num));
            $(this).parent().next().next().next().text(10 - num)
            if ($(this).parent().next().next().next().text() == 0) {
                $(this).parent().next().next().text('无货')
            }
            money()
        })
        $(".jian").click(function () {

            var num = $(this).next().val();
            if (num == 0) {
                return;
            }
            $(this).next().val(parseInt(--num));
            $(this).parent().next().next().next().text(10 - num)

            $(this).parent().next().next().text('有货')
            money()
        })

        function money() {
            var price = $('.jia').parent().next();
            var num = $('.jia').prev();
            var xiaoji = $('.xiaoji');
            var sum = 0.0;
            $("td").each(function () {
                if ($(this).find(".checksin")[0].checked == true) {
                    for (var i = 0; i < price.length; i++) {
                        var price1 = parseFloat(price.eq(i).text());
                        var num1 = parseFloat(num.eq(i).val());
                        xiaoji.eq(i).text((price1 * num1).toFixed(2))
                        sum += price1 * num1;
                    }
                    $('.total').text(sum.toFixed(2));
                }
                else
                {return false;}
            })
        }


    </script>
</body>

</html>
  • 写回答

1条回答 默认 最新

  • CSDN专家-showbo 2021-11-28 20:34
    关注

    题主可以参考下我之前写的,原生,jquery的都有
    https://ask.csdn.net/questions/7507051

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 11月28日
  • 已采纳回答 11月28日
  • 创建了问题 11月28日

悬赏问题

  • ¥15 乌班图ip地址配置及远程SSH
  • ¥15 怎么让点阵屏显示静态爱心,用keiluVision5写出让点阵屏显示静态爱心的代码,越快越好
  • ¥15 PSPICE制作一个加法器
  • ¥15 javaweb项目无法正常跳转
  • ¥15 VMBox虚拟机无法访问
  • ¥15 skd显示找不到头文件
  • ¥15 机器视觉中图片中长度与真实长度的关系
  • ¥15 fastreport table 怎么只让每页的最下面和最顶部有横线
  • ¥15 java 的protected权限 ,问题在注释里
  • ¥15 这个是哪里有问题啊?