十年专注于品牌网站建设 十年专注于品牌网站建设,低调、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

选择产品种类及数量算出价格通过javascript实现方法

百恒网络 2013-07-23 1818

在做购物网站过程中经常会遇到要根据产品数量与单价计算出小计的价格.一般都会列出好几种重量,如图所示,一般我们会用单选框,对于同名的单选框我们该怎样获取选中的值呢?同时在改数数量或种类时怎样关联互动呢?在此南昌网站设计公司技术人员向广大网站建设公司开发人员详细介绍实现方法.

<script type="text/javascript">
function G(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}} 定义获取对象的函数.
function ChangePrice(val,Type)
{
var SubTotal=0;
var WeightValue=0;
var WeightObj = document.getElementsByName("Weight");
for(var i=0;i<WeightObj.length;i++){if(WeightObj[i].checked) WeightValue=parseFloat(WeightObj[i].value);}
这是重点,将单选框做为数组,逐个遍历,判断状态为checked的对象,再获取相应该的值,同是要注意使用parseFloat进行强制性转换,确保能正常参与运算.关于parseFloat详细使用方法,请查看该文章 Number()、parselnt()和parseFloat()的用法及注意事项

if (Type=="rad")
{
SubTotal=parseFloat(G("Quantity").value)*val;
}
else
{
if(WeightValue<=0)
{SubTotal=0;}
else{SubTotal=WeightValue*val;}



G("SubTotal").innerHTML=SubTotal+"?";
}
</script>
<input id="Weight" name="Weight" type="radio" value="168" onclick="ChangePrice(this.value,'rad')"/>1.0磅:约12×12(cm)   [¥168.00元]<br/>
<input id="Weight" name="Weight" type="radio" value="260" onclick="ChangePrice(this.value,'rad')"/>2.0磅:约16×16(cm)   [¥260.00元]<br/>
<input id="Weight" name="Weight" type="radio" value="390" onclick="ChangePrice(this.value,'rad')"/>3.0磅:约22×22(cm)   [¥390.00元]<br/>
<input id="Weight" name="Weight" type="radio" value="650" onclick="ChangePrice(this.value,'rad')"/>4.0磅:约27×27(cm)   [¥650.00元]<br/>
购买数量:<select id="Quantity" name="Quantity" onchange="ChangePrice(this.value,'sel')">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br/>
<span id="SubTotal"></span>
    希望对广大站长或网站建设公司有所帮助,如对此不太理解的,可以与南昌网络公司百恒网络技术部联系。我们很高与广大站长和网站建设公司技术人员分享我们的技术和经验。
为用户提供高品质的网络产品和优质的服务是我们始终追求的目标!

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×