<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. 特效effects(二)

    CCActionInterval* createEffect(int nIndex, float t) { CCDirector::sharedDirector()->setDepthTest( ...

  2. Django内置过滤器详解附代码附效果图--附全部内置过滤器帮助文档

    前言 基本环境 Django版本:1.11.8 Python版本:3.6 OS: win10 x64 本文摘要 提供了常用的Django内置过滤器的详细介绍,包括过滤器的功能.语法.代码和效果示例. ...

  3. centos7 編譯 chmsee

    安装libchm及相关的devel包,安装 xulrunner 及 devel 包!否则后面make的时候会出错! 到解压出来的chmsee/src目录下,找到与你系统对应的Makefile文件,我选 ...

  4. Python 2.7.9 Demo - 019.01.CRUD oracle by cx_Oracle

    select #coding=utf-8 #!/usr/bin/python import cx_Oracle; conn = None; cursor = None; try: conn = cx_ ...

  5. ASP.NET MVC4企业级实战目录

    http://www.cnblogs.com/jiekzou/p/5625762.html#!comments ******************************************** ...

  6. bootstrap中模态框的大小设置

    <!-- 大模态框的调节 --> <button type="button" class="btn btn-primary" data-tog ...

  7. java 多线程8 : synchronized锁机制 之 方法锁

    脏读 一个常见的概念.在多线程中,难免会出现在多个线程中对同一个对象的实例变量或者全局静态变量进行并发访问的情况,如果不做正确的同步处理,那么产生的后果就是"脏读",也就是取到的数 ...

  8. VBA学习笔记(6)--抽取第一列中叫“虹虹”的个人信息

    说明(2017.3.25): 1. 知识点为dim arr2(1 to 1000, 1 to 4)先定义一个足够大的二维数组,不然后面需要transpose转置成一维数组. '抽取列表中叫“虹虹”的所 ...

  9. Springmvc mvc:exclude-mapping不拦截 无效

    最近在使用ssm框架搭建一个后台,需要判断每个请求都判断是否登录,未登录跳转到登录页面, 使用发现 mvc:exclude-mapping 不拦截,发现,怎么都无效,依然是进行拦截.查了很多资料,总算 ...

  10. 在chrome中的source找不到自己写的js时处理方法

    今天准备调试下js,突然发现在谷歌的中source中找不到我要调试的js,后来查资料和听同事说谷歌会把js压缩,于是找到以下方法来调试js 1. debugger神器 横扫各个浏览器.脚本运行到deb ...