<!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. 洛谷 P1803 凌乱的yyy Label:Water 贪心

    题目背景 快noip了,yyy很紧张! 题目描述 现在各大oj上有n个比赛,每个比赛的开始.结束的时间点是知道的. yyy认为,参加越多的比赛,noip就能考的越好(假的) 所以,他想知道他最多能参加 ...

  2. 【BZOJ】2693: jzptab

    http://www.lydsy.com/JudgeOnline/problem.php?id=2693 题意:求$\sum_{i=1}^{n} \sum_{j=1}^{m} lcm(i, j)$, ...

  3. 李洪强iOS经典面试题128

    1.写一个NSString类的实现 + (id)initWithCString:(c*****t char *)nullTerminatedCString encoding:(NSStringEnco ...

  4. win7/IE8无法加载QCbin的插件

    pian A: 1.控制面板->系统和安全->更改用户账户控制设置->安全等级调至最低->关机重启 2.打开IE浏览器->工具->Internet选项->高级 ...

  5. ado.net 连接,删除,添加

    ado.net数据库访问技术将数据库中的数据,提取到内存中,展示给用户看还可以将内存中的数据写入数据库中去 并不是唯一的数据库访问技术,但是它是最底层的数据库访问技术 数据库: create data ...

  6. Android自定义UI模板

    第一步:自定义xml属性 新建一个android项目,在values文件夹中新建一个atts.xml的文件,在这个xml文件中声明我们一会在使用自定义控件时候需要指明的属性.atts.xml < ...

  7. jquery 的datatables插件问题

      翻页后js失效: 重绘事件-当表格重绘完成后 重新绑定事件: draw.dt $('#example').dataTable(); $('#example').on( 'draw.dt', fun ...

  8. openoffice从word转pdf问题

    http://www.oschina.net/question/227511_87517

  9. ASM文件系统

    1.确认数据库版本 2.个人理解的存储解决方案的发展趋势 2.1图示说明 2.2图示描述 如上图我们描述了在不同时期的IT行业(数据库)出现的存储文件系统,下面我们将分别说明: ü  裸设备:所谓裸设 ...

  10. websocket总结

    一.WebSocket简介 WebSocket  protocol是HTML5一种新的协议,WebSocket 是目前唯一真正实现全双工通信的服务器向客户端推送的互联网技术.WebSocket的出现使 ...