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


Posted in Javascript onJanuary 26, 2014
<!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 相关文章推荐
jquery easyui combox一些实用的小方法
Dec 25 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
Angular Material Icon使用详解
Nov 07 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
Postman无法正常返回结果问题解决
Aug 28 Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 Javascript
动态添加option及createElement使用示例
Jan 26 #Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 #Javascript
js中创建对象的几种方式示例介绍
Jan 26 #Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 #Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 #Javascript
JS对象转换为Jquery对象示例
Jan 26 #Javascript
JavaScript原型链示例分享
Jan 26 #Javascript
You might like
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
event.srcElement 用法笔记e.target
2009/12/18 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
python 中xpath爬虫实例详解
2019/08/26 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
介绍一下linux文件系统分配策略
2013/02/25 面试题
计算机系毕业生推荐信
2013/11/06 职场文书
班组长的岗位职责
2013/12/09 职场文书
大学生求职信范文应怎么写
2014/01/01 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
门卫管理制度范本
2015/08/05 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
Go 语言中 20 个占位符的整理
2021/10/16 Golang
pandas进行数据输入和输出的方法详解
2022/03/23 Python