js购物车计算价格

Posted 北执

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js购物车计算价格相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

<head>
    <meta charset=" utf-8">
    <meta name="author" content="http://www.softwhy.com/" />
    <title>购物车</title>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function() {
            function jisuan(obj) {
                var total = 0;
                var jj = $(".jj");
                var fruits = $(\'input[name="fruit"]\')
                for (var i = 0; i < fruits.length; i++) {
                    if (fruits[i].checked) {
                        total += (parseFloat(fruits[i].value) * parseFloat(jj[i].innerHTML));
                    }
                }
                $("#myspan").text(total);
            }

            $(function() {
                var inputs = $("input");
                for (var i = 0; i < inputs.length; i++) {
                    inputs[i].onclick = function() {
                        jisuan(this)
                    }
                }
            })

            $("#btn").click(function() {
                var mn = [];
                var sum = 0;
                var len = $(\'input[name="fruit"]:checked\').length;
                if (len == 0 || len < $(\'input[name="fruit"]\').length) {
                    $(\'input[name="fruit"]\').prop("checked", true);
                    $("ul li").each(function(index) {
                        if ($("input[name=\'fruit\']").eq(index).prop(\'checked\')) {
                            var dj = $(\'input[name="fruit"]:checked\').eq(index).val();
                            var num = $(\'input[name="fruit"]:checked\').eq(index).siblings("span").text();
                            mn.push(parseFloat(dj) * parseFloat(num));
                        }
                    })
                    $.each(mn, function(i) {
                        sum += mn[i];
                    });

                    $("#myspan").text(sum);
                } else {
                    $(\'input[name="fruit"]\').prop("checked", false);
                    $("#myspan").text(0)
                }

            })
        })

    </script>
</head>

<body>
    <button id="btn">全选</button>
    <ul id="box">
        <li>
            <input type="checkbox" name="fruit" value="10" />10元 <span class="jj">10个</span></li>
        <li>
            <input type="checkbox" name="fruit" value="20" />20元 <span class="jj">20个</span></li>
        <li>
            <input type="checkbox" name="fruit" value="30" />30元 <span class="jj">30个</span></li>
        <li>
            <input type="checkbox" name="fruit" value="40" />40元 <span class="jj">40个</span></li>
        <li>
            <input type="checkbox" name="fruit" value="50" />50元 <span class="jj">50个</span></li>
    </ul>
    总价格是：<span id="myspan">0</span>元

</body>

</html>

效果如下：

 

以上是关于js购物车计算价格的主要内容，如果未能解决你的问题，请参考以下文章

js购物车全选反选商品价格统计

jquery实现的购物车商品数量变化，价格随之变动，但是总价格怎么跟着变啊？

购物车中的初始数量和价格 React.js

用html做一个购物车，能实现简单的产品数量和价格的加减就行。最后能计算出提交物品价格的总和。

JQ实现购物车价格计算

Knockout JS 购物车练习