js表单计算金额问题

王朝学院·作者佚名  2016-08-27  
宽屏版  字体:  |  |  | 超大  

<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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
© 2005- 王朝网络 版权所有