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

 更新时间: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>

相关文章

  • d3.js入门教程之数据绑定详解

    d3.js入门教程之数据绑定详解

    这篇文章主要介绍了关于d3.js数据绑定的相关资料,文中通过示例代码介绍的非常详细,对大家学习只d3.js具有一定的参考价值,需要的朋友下面来一起看看吧。
    2017-04-04
  • javascript中mouseenter与mouseover的异同

    javascript中mouseenter与mouseover的异同

    javascript中mouseover和mouseenter的区别主要在于监听对象的子元素是否触发事件。mouseover:鼠标移入监听对象中,或者从监听对象的一个子元素移入另一个子元素中时触发该事件。mouseenter:鼠标移入监听对象时触发,在监听对象内移动不会触发。
    2017-06-06
  • 简洁短小的 JavaScript IE 浏览器判定代码

    简洁短小的 JavaScript IE 浏览器判定代码

    IE浏览器不管是什么版本,总是跟Web标准有些不太兼容。对于代码工作者来说,自然是苦不堪言,为了考虑IE的兼容问题,不管是写 CSS 还是 JS,往往都要对 IE 特别对待,这就少不了做些判断。本文不讨论如何区分 IE 的样式,仅是 JS 判定 IE 浏览器。
    2010-03-03
  • 善用事件代理,警惕闭包的性能陷阱。

    善用事件代理,警惕闭包的性能陷阱。

    关于JS性能优化中的冰山一角:事件代理、警惕闭包。其实本文有一个文章已经说到,闭包如何产生,闭包的作用;
    2011-01-01
  • 微信小程序实现tab页面切换功能

    微信小程序实现tab页面切换功能

    这篇文章主要介绍了微信小程序实现tab页面切换功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • 鼠标放上去则向上向下滚动的代码

    鼠标放上去则向上向下滚动的代码

    [酱色]鼠标放上去则向上向下滚动的代码...
    2006-11-11
  • JS简单实现点击复制链接的方法

    JS简单实现点击复制链接的方法

    这篇文章主要介绍了JS简单实现点击复制链接的方法,提供了2种简单的复制链接操作方法供大家选择使用,需要的朋友可以参考下
    2016-08-08
  • 每天一篇javascript学习小结(基础知识)

    每天一篇javascript学习小结(基础知识)

    这篇文章主要介绍了javascript基本的知识点,包括字符串、特殊字符运算、变量转字符串等,对javascript的基础知识讲解的很全面,为了更好地帮助大家学习javascript,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JS判断键盘是否按的回车键并触发指定按钮点击操作的方法

    JS判断键盘是否按的回车键并触发指定按钮点击操作的方法

    下面小编就为大家带来一篇JS判断键盘是否按的回车键并触发指定按钮点击操作的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • JavaScript限定图片显示大小的方法

    JavaScript限定图片显示大小的方法

    这篇文章主要介绍了JavaScript限定图片显示大小的方法,涉及javascript针对图片的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03

最新评论