zoukankan      html  css  js  c++  java
  • 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>元&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>
  • 相关阅读:
    在模拟器安装测试APP,给指定设备安装APP
    设置安卓模拟器,打开模拟器,设置语言为中文
    使用appium1.4在android8.0真机上测试程序时报错command failed shell "ps 'uiautomator'"的解决方式
    appium1.4+华为8.0执行自动化脚本,报启动session失败,原因是unicode_ime_apk\Uni codeIMEdebug.apk在手机上已存在,再次安装失败,导致启动session失败,解决办法:换高版本的appium
    搭建appium+maven手机自动化测试环境搭建
    appium1.7的使用
    SDK打开模拟器遇到SDK包里缺少API组件,附上我的解决历程,心累
    简单记录下Jmeter通过CSV保存测试数据,测试用例,及将测试结果导出到Excel里
    基于webpack的React项目搭建(一)
    基于webpack的React项目搭建(二)
  • 原文地址:https://www.cnblogs.com/xiaomifeng/p/4790699.html
Copyright © 2011-2022 走看看