<!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购物车计算价格的更多相关文章

  1. jQuery实现购物车计算价格功能的方法

    本文实例讲述了jQuery实现购物车计算价格功能的简易方法,做的比较简单,现分享给大家供大家参考.具体如下: 目的: <%@ page language="java" con ...

  2. js实时计算价格

    //通过数量,单价的输入,实时显示总价 $("#number,#price").on("input",function(e){ $("#totalPr ...

  3. 非node环境下的vue.js 实现简单的购物车计算功能 样式请无视

    都说vue的双向数据绑定好用,自己用了下,感觉做购物车没想象中好用.自己的实现如下: <!DOCTYPE html> <html lang="en"> &l ...

  4. Android中购物车的全选、反选、问题和计算价格

    此Demo主要解决的是购物车中的全选,反选计算价格和选中的条目个数的问题,当选中几条时,点击反选,会把当先选中的变为不选中,把不选中的变为选中.点击全选会全部选中,再次点击时,变为全部不选中. //- ...

  5. HTML打折计算价格

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <met ...

  6. js浮点数计算问题 + 金额大写转换

    一 js浮点数计算问题解决方案: 1.使用 NumberObject.toFixed(num) 方法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字. 2.较精度计算浮点数 ...

  7. js小数计算小数点后显示多位小数（转）

    首先写一个demo 重现问题,我使用的是一个js在线测试环境[打开] 改写displaynum()函数 function displaynum(){var num = 22.77;alert(num ...

  8. 例题：超市买东西的程序。输入商品信息，计算价格，价格满多少元打折。这道题用到结构体，集合，for循环，if else语句

    知识要点: 集合和数组的区别:数组是连续的,同一类型的一块区域,而集合可以是不连续的,多种数据类型的. 集合属性:.count 方法:.Add()  将对象添加到ArrayList中实际包含的元素数 ...

  9. checkbox的全选、反选（计算价格）

    package com.baidu.jisuan; import java.util.ArrayList;import java.util.List; import com.baidu.adapter ...

随机推荐

  1. Nginx 利用 X-Accel-Redirect response.setHeader 控制文件下载

    nginx.conf location / { proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP ...

  2. [知识点]KMP算法

    // 此博文为迁移而来,写于2015年5月24日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102w1iw.html 1.前 ...

  3. C程序演示产生僵死进程的过程

    先抄录网上一段对僵死进程的描述: 僵尸进程:一个进程使用fork创建子进程,如果子进程退出,而父进程并没有调用wait或waitpid获取子进程的状态信息,那么子进程的进程描述符仍然保存在系统中.这种 ...

  4. Makefile学习

    makefile中常用的函数: http://linux.chinaunix.net/techdoc/develop/2009/07/09/1122854.shtml SRC = $(wildcard ...

  5. 在配置IIS负载均衡时，引起的一系列问题

    问题一: IIS中要上传文件的路径是另一台服务器的地址(如:本机IP是192.168.0.100,文件保存的路径在://192.168.0.101/images/folder),在上传时抛出异常: A ...

  6. Crossing River

    Crossing River 题目链接:http://acm.hust.edu.cn/vjudge/problem/visitOriginUrl.action?id=26251 题意: N个人希望去过 ...

  7. gitlab的使用方法

    Git global setup: git全局建立 git config --global user.name "Your Name" git config --global us ...

  8. ThinkPHP的URL优化

    在刚刚安装好tp框架时,我们的路径一般是这样的: http://localhost/index.php/Home/Index/index?name=cly 我们可以通过下面一步步的步骤来优化这个路径 ...

  9. 好看的css3按钮和文本框

    .button{ width: 80px; line-height: 25px; text-align: center; ; color: #fff; text-shadow:1px 1px 1px ...

  10. 繁简体 互转 js

    html: <script type="text/javascript" src="/js/s2t.js"></script><s ...