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

代码如下:

<!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>

赞 (0)

相关推荐

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

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

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

  • react-native 实现购物车滑动删除效果的示例代码

    react-native 实现购物车滑动删除效果的示例代码

    购物车的功能基本上电商项目都会有的,这是一篇关于react-native的,原生android的已经好久没写了.记得以前写原生购物车的时候,遇到过产品的灵魂质问,为啥iOS的滑动删除可以,android却那么难实现的.这个时候,我就打开微信说,android的微信版也是长按进行操作,iOS的是滑动操作的,两个平台自带的系统交互操作是不一样的.当然,最后还是默默的找各种三方库去进行滑动删除. rn的项目也是找的网上的一个三方库进行列表滑动操作的,github地址react-native-swipe

  • MYSQL实现添加购物车时防止重复添加示例代码

    前言 最近因为工作的原因,在做APP购物车下单支付这一块儿.被测试提了一个bug,当点加入购物车点的比较快的时候,同一个商品在购物车中出现了两个. 因为加入购物车的时候,分2步, 第1步是先判断要加入购物车的商品是不是已经在购物车当中了,如果在的话就在原来的数量基础上做加一操作.如果不在再插件. 因为两步不是原子的操作,所以就出现了多线程的安全问题,下面话不多说了,来跟随小编一起来看看详细的解决过程吧,会对你有一定的帮助的. MySQL insert有一个比较高级的操作 示例代码: INSERT

  • jQuery+ajax读取json数据并按照价格排序示例

    本文实例讲述了jQuery+ajax读取json数据并按照价格排序.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.9.1.js"></script> <script> $.ajax({ url

  • Jquery选中或取消radio示例

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

  • jQuery实现监听下拉框选中内容发生改变操作示例

    本文实例讲述了jQuery实现监听下拉框选中内容发生改变操作.分享给大家供大家参考,具体如下: jQuery代码部分: <script> $(document).ready(function(){ var defaultId = "${defaultSelected}"; var defaultTime = "${timeName}"; $("select option").each(function(){ if($(this).va

  • 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

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

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

  • 微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能

    实现的效果就是: 1.点击全选选中所有商品,再点击全选,取消勾选 2.在选中的同时获取需要的商品id,获取后是以字符串拼接的形式 拼成一个字符串 3.点击删除按钮时删除选中的商品 点击全选 再次点击全选框 wxml关键代码 重要代码 value="{{item.goods_id}}" -->checkbox被选中的值就是这个goods_id checked="{{item.checked}}" -->checked代表选中与否 ,ture选中,false

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

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

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

随机推荐