<!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. ACM:Pseudoforest-并查集-最大生成树-解题报

    Pseudoforest Time Limit:5000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit Status ...

  2. 转载：移动前端开发之viewport的深入理解

    原文作者:无双 原文链接:http://www.cnblogs.com/2050/p/3877280.html 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有 ...

  3. PHP程序员 新人求职 平台

    投简历网站:大街网:中下,但是反馈速度不错拉勾网:中上,工资好像很多都很不错实习僧:不太熟悉,中等吧猎聘网:好像不错,本人不常用海投网:不清楚,没用过以上评级都是个人感觉而已,不代表正式评价个人感觉以 ...

  4. iOS 网络框架编写总结

    一,常用 1> 不错的处理接收到的网络图片数据的方法 id img= ISNSNULL(pic)?nil:[pic valueForKey:@"img"]; NSString ...

  5. C#图片处理---基础

    简单的图片剪裁 using System; using System.Drawing; using System.Drawing.Drawing2D; using System.IO; namespa ...

  6. SpringMVC+Thymeleaf如何处理URL中的动态查询参数

    1.使用一个Map<String, String>接收数据 When you request a Map annotated with @RequestParam Spring creat ...

  7. 纪念逝去的岁月——C/C++字符串反转

    几年前,我还不会写这个 输入:hello world 输出:dlrow olleh 代码 #include <stdio.h> #include <string.h> void ...

  8. Nginx做NodeJS应用负载均衡配置实例

    这篇文章主要介绍了Nginx做NodeJS应用负载均衡配置实例,本文直接给出配置实例,需要的朋友可以参考下. 负载均衡可以把用户的请求分摊到多个服务器上进行处理,从而实现了对海量用户的访问支持.负载均 ...

  9. sencha 安装、学习

     sencha touch 是Extjs 的手机版,Extjs是创建富客户端的AJAX应用中的重量级框架,sencha touch当然就是面向触摸设备的重量级js框架,在做基于桌面的网页时经常用的js ...

  10. Big Chocolate

    Big Chocolate 题目链接:http://acm.hust.edu.cn/vjudge/problem/visitOriginUrl.action?id=19127 Big Chocolat ...