<!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. web安全测试

  2. 【wikioi】1025 选菜

    题目链接 算法:01背包DP 此题主要是预处理恶心.我提交了2次...第一次数组开小了...(体积要=V*10) 注意: 钱做为体积,美味价值作为价值 注意,因为体积(钱)是小数点后1位,故数组下标无 ...

  3. 【CodeVS】P1041 car的旅行路线

    题目描述 Description 又到暑假了,住在城市A的Car想和朋友一起去城市B旅游.她知道每个城市都有四个飞机场,分别位于一个矩形的四个顶点上,同一个城市中两个机场之间有一条笔直的高速铁路,第I ...

  4. MongoDB介绍及安装

    一.介绍: 1.NoSql(非关系型的数据库)成了一个极其热门的新领域,非关系数据库产品的发展非常迅速.MongoDB是NoSql的其中一种较为热门的非关系型数据库.查阅很多资料.其他博客和网站,借着 ...

  5. 李洪强漫谈iOS开发[C语言-051]-判断整数位数

  6. 字典的快速赋值 setValuesForKeysWithDictionary

    字典的快速赋值 setValuesForKeysWithDictionary ​ 前言 在学习解析数据的时候,我们经常是这么写的:PersonModel.h文件中    @property (nona ...

  7. Odoo SSO 单点登录

    很多公司会有内部单点登录系统,采用Odoo系统的公司可能就有需要将Odoo接入公司内部的单点登录系统. 实现的思路很简单,由于每个公司的系统不一样,代码仅作示例说明. 首先,重写Odoo登录界面: & ...

  8. unity3d插件Daikon Forge GUI 中文教程1-Daikon Forge介绍

    DF-GUI特点: ·        深编辑器集成:DF-GUI提供广泛的整合与Unity3D编辑环境,包括自定义检查人员对每个组件向导来简化复杂的多步任务,提高生产力的上下文菜单,编辑控件在一个所见 ...

  9. SQL serve 聚合函数、字符串函数

    1.聚合函数 sum,avg,max,min,count        having后面只能跟聚合函数 2.数学函数和字符串函数 3.练习: 1)新建一个学生信息表,根据问题写出程序. 2)新建一个超 ...

  10. vmware安装centos时遇到无法创建新虚拟机: 不具备执行此操作的权限。

    我的问题是选择文件位置造成的,我选择在了VMware安装的位置,重新选择一个文件夹即可.