js购物车计算价格

最新推荐文章于 2021-06-07 15:01:44 发布

weixin_30872157

最新推荐文章于 2021-06-07 15:01:44 发布

阅读量144

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/beiz/p/5609954.html

版权

<!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>

效果如下：