购物车选中得到价格实现示例

 本文为大家介绍下购物车如何实现选中得到价格,下面有个不错的示例,大家可以参考下

代码如下:
<!DOCTYPE html> 
<html> 
<head> 
<title>MyCart1.html</title> 
 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<script language = "javascript" type = "text/javascript"> 
 
function jisuan(obj){ 
 
var total = 0; 
var fruits = document.getElementsByName("fruit"); 
for(var i=0;i<fruits.length;i++){ 
if(fruits[i].checked){ 
total += parseFloat(fruits[i].value); 


myspan.innerText = total + "元"; 

</script> 
</head> 
 
<body> 
<input type = "checkbox" name = "fruit" value = "10" onclick = "jisuan(this)">苹果 10元<br/> 
<input type = "checkbox" name = "fruit" value = "20" onclick = "jisuan(this)">香蕉 20元<br/> 
<input type = "checkbox" name = "fruit" value = "30" onclick = "jisuan(this)">西瓜 30元<br/> 
<input type = "checkbox" name = "fruit" value = "40" onclick = "jisuan(this)">栗子 40元<br/> 
<input type = "checkbox" name = "fruit" value = "50" onclick = "jisuan(this)">哈密瓜 50元<br/><br/> 
总价格是:<span id = "myspan">0元</span> 
</body> 
</html> 

时间: 2024-12-24 21:22:33

购物车选中得到价格实现示例的相关文章

购物车选中得到价格实现示例_javascript技巧

复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>MyCart1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this i

Jquery选中或取消radio示例_jquery

JQuery获取选中的radio $('input:radio[name="sex"]:checked') Jquery选中或取消radio $("#tradeType0").attr("checked","checked"); $("#tradeType1").attr("checked",false);

php实现12306余票查询、价格查询示例_php实例

复制代码 代码如下: <?php/** * 车票接口类 *  * @author chepiao100 * */class chepiao100{  /**  * 接口地址  * @var string  */ private $_apiurl = 'http://www.chepiao100.com/api/';   /**   * 返回接口数据   *    * @param string $method 接口方法   * @param array $param 请求参数   * @retu

asp.net使用jQuery获取RadioButtonList成员选中内容和值示例_实用技巧

复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

Ajax修改购物车示例_AJAX相关

1.购物车类的设计 ShoppingCartItem:书的封装,包括书名,数量,价格三个属性,以及对应的getter和setter方法. ShoppingCart:购物车封装类,items为 Map<String, ShoppingCartItem> ,以及加入购物车,得到购物车中书的总数量以及总价格三个函数. 2:jsp加入购物车,超链接中带入书名以及价格 <body> <!-- 加入span的目的是为了定位 --> <div id="cartstat

使用MongoDB和JSP实现一个简单的购物车系统实例_JSP编程

本文介绍了JSP编程技术实现一个简单的购物车程序,具体如下: 1 问题描述 利用JSP编程技术实现一个简单的购物车程序,具体要求如下. (1)用JSP编写一个登录页面,登录信息中有用户名和密码,分别用两个按钮来提交和重置登录信息. (2)编写一个JSP程序来获取用户提交的登录信息并查询数据库,如果用户名为本小组成员的名字且密码为对应的学号时,采用JSP内置对象的方法跳转到订购页面(显示店中商品的种类和单价等目录信息):否则采用JSP动作提示用户重新登录(注:此页面上要包含前面的登录界面). (3

Angularjs 制作购物车功能实例代码_AngularJS

初学angularJS   闲暇之余做了个小案例. 功能:计算购物车商品的价格,以及删除购物车商品. 以下是完整案例(jQuery和angularjs需要自己引入) <!doctype html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .cursors{curs

Jquery 快速构建可拖曳的购物车DragDrop_jquery

这样一来,购买者只需要把自己感兴趣的商品拖曳到自己的购物车中,也可以从购物车中删除商品 同时更新购物车的总体价格和数量. 那咱们就开始实例吧,本实例并没有链接数据库读取数据来初始化Products,而是创建了一些虚拟的商品如下: 1. 创建Product实体类 复制代码 代码如下: public class Product { public string Code { get; set; } public string Name { get; set; } public string Descr

php实现购物车产品删除功能(2)

上一篇的时候只是写了简单的加入购物车功能,购物车中产品的删除.提交订单后,库存的减少 以及客户账户的余额都没有完善,这一篇是接着完善上一篇的,上一篇写到了购物车中删除的功能了,为了使删除的代码少敲一些,我们要把前面 链接删除页面的时候 获取ids的值改为获取 arr的索引值arr的索引值k  改为 <a href='shanchu.php?sy={$k}'>删除</a></td> 这样我们进入删除页面后  就可以直接获取索引值sy 这样删除页面写起来就简单多了 下面就是