<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>元&nbsp;&nbsp;&nbsp;&nbsp;<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表单计算金额问题的更多相关文章

  1. js表单验证工具包

    常用的js表单验证方法大全 /* 非空校验 : isNull() 是否是数字: isNumber(field) trim函数: trim() lTrim() rTrim() 校验字符串是否为空: ch ...

  2. JS表单验证-12个常用的JS表单验证

    JS表单验证-12个常用的JS表单验证 最近有个项目用到了表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1. 长度限制 <p>1. 长度 ...

  3. js 表单验证控制代码大全

    js表单验证控制代码大全 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...

  4. node.js表单——formidable/////z

    node.js表单--formidable   node处理表单请求,需要用到formidable包.安装formidable包的命令如下: npm install formidable 安装pack ...

  5. js表单提交,面向对象

    一.js表单验证之后再提交 1.普通按钮onclick函数调用表单的submit()函数 <input type=button name="submit1" value=&q ...

  6. jquery.validation.js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

  7. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  8. angular js 表单验证

    <!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...

  9. JS表单验证类HTML代码实例

    以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...

随机推荐

  1. cvs history,CVS中查询目录下所有文件的提交记录

    我们习惯用eclipse svn中查看一个目录下,甚至整个工程下,所有的文件的变更列表:操作为:右键工程 -> Team -> Show History. 最近在使用CVS,eclipse ...

  2. document对象和属性

    文档对象:整个Html都属于document,他封装了大量的功能: docum的属性: document.title //设置文档标题等价于HTML的<title>标签 document. ...

  3. CentOS 7 开放防火墙端口 命令

    iptables防火墙 1.基本操作 # 查看防火墙状态 service iptables status   # 停止防火墙 service iptables stop   # 启动防火墙 servi ...

  4. opensips安装

    主要流程见这个教程吧:感谢大佬 http://blog.csdn.net/u011026329/article/details/50821679 其中 mediaproxy的安装会出错.做如下修改 下 ...

  5. css让footer永远保持在页面底部

    案例1:仅仅保存在页面底部.不固定. 思路: html: <div class="body"> <header>我是头部</header> &l ...

  6. 查看局域网其它电脑的计算机名和IP

    一.下面脚本可查看局域网中的电脑计算机名和IP,保存下面文本至记事本.后缀改成bat COLOR 0A CLS @ECHO Off Title 查询局域网内在线电脑IP :send @ECHO off ...

  7. contiki rpl

    Linking target: udp-client-temperature.stk3700arm-none-eabi-gcc -Xlinker -Map=udp-client-temperature ...

  8. java资料——线性表(转)

    线性表 线性表(亦作顺序表)是最基本.最简单.也是最常用的一种数据结构.线性表中数据元素之间的关系是一对一的关系,即除了第一个和最后一个数据元素之外,其它数据元素都是首尾相接的.线性表的逻辑结构简单, ...

  9. 电快速脉冲群EFT(概念)

    电快速瞬变脉冲群 简称EFT(Electrical Fast Transient)是指脉冲群有特定的持续时间(规定为15mS),特定的脉冲周期(300mS)的脉冲, 脉冲群中的单个脉冲有特定的重复周期 ...

  10. 多线程中的synchronized小结

    1.synchronized是Java中的关键字,是一种同步锁.它修饰的对象有以下几种: 1. 修饰一个代码块,被修饰的代码块称为同步语句块,其作用的范围是大括号{}括起来的代码,作用的对象是调用这个 ...