伤心大学生 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 wpf界面一直接收PLC给过来的信号,导致UI界面操作起来会卡顿
  • ¥15 init i2c:2 freq:100000[MAIXPY]: find ov2640[MAIXPY]: find ov sensor是main文件哪里有问题吗
  • ¥15 运动想象脑电信号数据集.vhdr
  • ¥15 三因素重复测量数据R语句编写,不存在交互作用
  • ¥15 微信会员卡等级和折扣规则
  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络,如何解决?
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒