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

 更新时间:2014年01月26日 15:48:53   作者:  
本文为大家介绍下购物车如何实现选中得到价格,下面有个不错的示例,大家可以参考下
复制代码 代码如下:

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

相关文章

  • JavaScript设计模式发布订阅模式

    JavaScript设计模式发布订阅模式

    这篇文章主要介绍了JavaScript设计模式发布订阅模式,发布订阅设计模式是和观察者设计模式基本上相同,但是他们两个设计模式不同的是发布订阅者拥有一个事件处理中心而观察者并没有
    2022-06-06
  • JavaScript中利用for循环遍历数组

    JavaScript中利用for循环遍历数组

    这篇文章主要为大家详细介绍了JavaScript中利用for循环遍历数组,最好不要使用for in遍历,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • JS与jQuery遍历Table所有单元格内容的方法

    JS与jQuery遍历Table所有单元格内容的方法

    这篇文章主要介绍了JS与jQuery遍历Table所有单元格内容的方法,结合实例形式分别描述了JavaScript与jQuery实现遍历table单元格的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • 延时重复执行函数 lLoopRun.js

    延时重复执行函数 lLoopRun.js

    延时重复执行函数 lLoopRun.js...
    2007-05-05
  • echarts tooltip自适应宽高让提示框适应不同屏幕尺寸demo

    echarts tooltip自适应宽高让提示框适应不同屏幕尺寸demo

    这篇文章主要为大家介绍了echarts tooltip自适应宽高让提示框适应不同屏幕尺寸,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • Bootstrap学习笔记 轮播(Carousel)插件

    Bootstrap学习笔记 轮播(Carousel)插件

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。这篇文章主要介绍了Bootstrap学习笔记 轮播(Carousel)插件,需要的朋友可以参考下
    2017-03-03
  • javascript动态加载二

    javascript动态加载二

    经过一番思考,到底怎么解决导包而且是异步的方式,最后得出一个解决方案。先来看一下采用这个方案后的编程方式
    2012-08-08
  • 一次围绕setTimeout的前端面试经验分享

    一次围绕setTimeout的前端面试经验分享

    这篇文章主要跟大家分享了一次围绕setTimeout展开的前端面试经验,是一篇有意思的围绕setTimeout展开的前端开发考题,考察了for循环、定时器setTimeout()、JavaScript闭包、匿名函数和Promise等,一不小心你可能就会做错,快来看看你有没有掌握了上面的知识。
    2017-06-06
  • 基于JavaScript实现图片剪切效果

    基于JavaScript实现图片剪切效果

    这篇文章主要介绍了用JavaScript实现图片剪切效果,本文给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • javascript 精粹笔记

    javascript 精粹笔记

    javascript 精粹笔记,都是一些js下应用技巧之类,学习js的朋友可以简单的参考浏览下。
    2010-05-05

最新评论