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


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 相关文章推荐
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
浅谈开发eslint规则
Oct 01 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
详解Vue.directive 自定义指令
Mar 27 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
动态添加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为字符串前后添加指定数量字符的方法
2015/05/04 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
解析jquery中的ajax缓存问题
2013/12/19 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
python实现顺序表的简单代码
2018/09/28 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
《鸿门宴》教学反思
2014/04/22 职场文书
企业承诺书格式
2014/05/21 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
债务授权委托书范本
2014/10/17 职场文书
2015大一新生军训感言
2015/08/01 职场文书
检讨书怎么写?
2019/06/21 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers