<!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. 深入浅出 - Android系统移植与平台开发（三）－ 编译并运行Android4.0模拟器

    作者:唐老师,华清远见嵌入式学院讲师. 1.   编译Android模拟器 在Ubuntu下,我们可以在源码里编译出自己的模拟器及SDK等编译工具,当然这个和在windows里下载的看起来没有什么区别 ...

  2. asp.net mvc本地程序集和GAC的程序集冲突解决方法

    一个从asp.net mvc 3升级到asp.net mvc 4的项目发生了如下错误: [A]System.Web.WebPages.Razor.Configuration.HostSection c ...

  3. JAVA生成带Logo的二维码

    1.下载生成二维码所需要的jar包qrcode.jar: 2.直接上生成二维码的java代码 //需要导入的包 import java.awt.Color;import java.awt.Graphi ...

  4. inline,block,inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

  5. Js特效--模仿滚动条（兼容IE8+,FF,Google）

    <html> <head> <style> *{margin:0px;padding:0px;} #box{width:200px;height:500px;pos ...

  6. 使用Apache Bench进行压力测试

    Apache Bench是Apache中自带的压力测试工具 在linux中我们安装好apache后可以通过ab指令使用它 格式:ab [参数] [http://]ip地址/path/ 常用参数说明: ...

  7. error CS0016: 未能写入输出文件

    win7 下解决办法: 1.打开C:\Windows ,找到 TEMP 文件夹 2. 进行权限设置,点击编辑,找到 IIS-User,勾选所有权限

  8. uilmit 优化

    #!/bin/bash sed -i "/^ulimit -SHn.*/d" /etc/rc.local echo "ulimit -SHn 102400" & ...

  9. mysql 命令管理

    新建数据库制定编码: GBK: create database test2 DEFAULT CHARACTER SET gbk COLLATE gbk_chinese_ci; UTF8: CREATE ...

  10. iOS 导入第三方文件夹时右侧出现问号

    首先,和版本库有关. a代表add,m代表modify,?代表未能识别,通常如果使用git之类的版本控制器,添加文件后没有进行提交,就会出现? 1.遇到引用文件夹为蓝色的情况,是你以为勾了copy项, ...