js表单计算金额问题
<table width="600" border="1" align="center" style="text-align:center;">
<tr> <td width="102"><input type="checkbox" id="all"/>全选</td> <td width="203">商品</td> <td width="119">单价</td> <td width="148">数量</td> </tr> <tr> <td><input type="checkbox" id="qianbi"/></td> <td>铅笔</td> <td>1.5元/支</td> <td><input type="text" id="qianbi_t" value="1" /></td> </tr> <tr> <td><input type="checkbox" id="yuanzhu" value="" /></td> <td>圆珠笔</td> <td>2.5元/支</td> <td><input type="text" id="yuanzhu_t" value="1" /></td> </tr> <tr> <td><input type="checkbox" id="gangbi" value="" /></td> <td>钢笔</td> <td>3元/支</td> <td><input type="text" id="gangbi_t" value="1" /></td> </tr> <tr> <td colspan="4">金额合计:<span id="m" style="color:#F00;"></span>元 <button>提交订单</button></td> </tr></table><script type="text/javascript"> var all=document.getElementById("all"); var qianbi=document.getElementById("qianbi"); var yuanzhubi=document.getElementById("yuanzhu"); var gangbi=document.getElementById("gangbi"); var qb_m=0,yzb_m=0,gb_m=0; all.onclick=function(){ if(all.checked){ qianbi.checked=true; yuanzhubi.checked=true; gangbi.checked=true; } else{ qianbi.checked=false; yuanzhubi.checked=false; gangbi.checked=false; } sub(); }; qianbi.onclick=function(){sub()}; yuanzhubi.onclick=function(){sub()}; gangbi.onclick=function(){sub()}; document.getElementById("qianbi_t").addEventListener("change",function(e){ sub(); }); document.getElementById("yuanzhu_t").addEventListener("change",function(e){ sub(); }); document.getElementById("gangbi_t").addEventListener("change",function(e){ sub(); }); function sub(){ if(qianbi.checked){ qb_m=document.getElementById("qianbi_t").value*1.5 } else{ qb_m=0; all.checked=false; } if(yuanzhubi.checked){ yzb_m=document.getElementById("yuanzhu_t").value*2.5 } else{ yzb_m=0; all.checked=false; } if(gangbi.checked){ gb_m=document.getElementById("gangbi_t").value*3 } else{ gb_m=0; all.checked=false; } var sum=qb_m+yzb_m+gb_m; document.getElementById("m").innerHTML=sum; }</script>js表单计算金额问题的更多相关文章
- js表单验证工具包
常用的js表单验证方法大全 /* 非空校验 : isNull() 是否是数字: isNumber(field) trim函数: trim() lTrim() rTrim() 校验字符串是否为空: ch ...
- JS表单验证-12个常用的JS表单验证
JS表单验证-12个常用的JS表单验证 最近有个项目用到了表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1. 长度限制 <p>1. 长度 ...
- js 表单验证控制代码大全
js表单验证控制代码大全 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...
- node.js表单——formidable/////z
node.js表单--formidable node处理表单请求,需要用到formidable包.安装formidable包的命令如下: npm install formidable 安装pack ...
- js表单提交,面向对象
一.js表单验证之后再提交 1.普通按钮onclick函数调用表单的submit()函数 <input type=button name="submit1" value=&q ...
- jquery.validation.js 表单验证
jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- angular js 表单验证
<!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...
- JS表单验证类HTML代码实例
以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...
随机推荐
- angular学习笔记(五)-阶乘计算实例(1)
<!DOCTYPE html> <html ng-app> <head> <title>2.3.2计算阶乘实例1</title> <m ...
- eclipse中类和方法添加作者日期说明
1.类添加作者日期说明 依次点击window—>preferences—>Java—>Code Stype—>Code Templates-Comments-Types 2.方 ...
- RTX——第12章 系统时钟节拍和时间管理
以下内容转载自安富莱电子: http://forum.armfly.com/forum.php 本章节为大家讲解 RTX 操作系统的时钟节拍和时间管理函数,其中时间管理函数是 RTX 的基本函数,初学 ...
- 手风琴式焦点图jQuery特效
手风琴式焦点图jQuery特效是一款鼠标点击人物图像滑动切换案例说明信息代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="ag-cont ...
- Eclipse下把jar包放到工程lib下和通过buildpath加载有什么不同(解决找不到类的中级方法)
我通过Eclipse的 User Libranry 将jar导入 Eclipse里面,编译没有问题,运行的时候就报class文件没有定义,后来上网上查了下,原因找到啦,是这样的: 用Java Buil ...
- [uboot]在uboot里面添加环境变量使用run来执行
转自:http://blog.csdn.net/yangzheng_yz/article/details/41038259 在移植uboot的时候,可以在uboot里面添加定义一些自己的环境变量,这些 ...
- hadoop上线和下线节点
在运行中的ambari hadoop集中中动态添加或删除节点 1. 下线节点1) namenode节点上dfs.exclude文件,看配置文件怎么配置的,里每行添加一个服务器名,如我要下线server ...
- FluentData - 轻量级.NET ORM持久化技术解决方式
FluentData - 轻量级.NET ORM持久化技术解决方式 文件夹: 一.什么是ORM? 二.使用ORM的优势 三.使用ORM的缺点 四.NET下的ORM框架有哪些? 五.几 ...
- JPA联合主键
联合主键也就是说需要多个字段才能确定数据库记录中的唯一一行.这样就需要多个字段一起,组成主键,也叫联合主键.例如飞机航线,我们需要知道飞机起飞的地点以及飞机降落的地点.所以需要飞机起飞的地点和降落的地 ...
- [oracle] 如何使用myBatis在数据库中插入数据并返回主键
在MyBatis中,希望在Oracle中插入数据的同时返回主键值,而非插入的条数. ① oracle使用 selectKey. U_USER_INFO_SEQ 是在数据库中定义好的这张表关联的序列se ...