<!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. Fedora 23 配置

    Linux下安装Fedora 刻到u盘上 下好iso后准备刻录到u盘...可是查了一下只能在用一个叫dd的东西刻= =于是学了下...然而就是一句话: dd if=/path/xxx.iso of=/ ...

  2. C语言（2）

    C语言(2)---变量 基本格式: 变量类型  变量名1[,变量名2,变量名3,...变量名n]: 注意: 1.在C语言中如果申请一个变量,里面存放小数,则用float表示,且在输出时需要注意prin ...

  3. Oracle 游标使用全解(转)

    -- 声明游标:CURSOR cursor_name IS select_statement --For 循环游标 --(1)定义游标 --(2)定义游标变量 --(3)使用for循环来使用这个游标 ...

  4. hadoop编程小技巧（5）---自定义输入文件格式类InputFormat

    Hadoop代码测试环境:Hadoop2.4 应用:在对数据需要进行一定条件的过滤和简单处理的时候可以使用自定义输入文件格式类. Hadoop内置的输入文件格式类有: 1)FileInputForma ...

  5. Linux-CentOS 6.5 mini 中没有curses.h的问题

    1.直接贴过程 [fengbo@CentOS: jigsaw]$ rpm -q ncursesncurses-5.7-3.20090208.el6.i686[fengbo@CentOS: jigsaw ...

  6. C#控制台打印简单【倒三角形】的图形

    今天想练习一下简单的打印图形,小弟没有学过什么算法,嘿嘿,以后有更好的想法继续修改... static void InvertedTrainangle() { Console.WriteLine(&q ...

  7. 在cenOS下安装apache出现-bash: /etc/init.d/httpd: 没有那个文件或目录

    我是在vmware上装的centos7,使用命令yum install httpd httpd-devel 安装完apache后,想要启动apache,执行了/etc/init.d/httpd sta ...

  8. VC 解密OUTLOOK pop3保存注册表密码

    原文连接:https://forum.90sec.org/forum.php?mod=viewthread&tid=8410 作者:Agile 用过OUTLOOK的人都知道,OUTLOOK的密 ...

  9. Python数据类型（3）

    字符串(str):单引号''.双引号""嵌套使用,可以不使用转义字符:'abc"dd"ef'."acc'd'12",字符串不可以是多行的三单 ...

  10. Linux 搭建svn服务器

    一.安装svn服务器端yum install subversion      从镜像下载安装svn服务器端 如果后面执行“svnadmin create /usr/local/svn/sunny”提示 ...