实例javascript如何实现购物车价格添加
用javascript实现如图所示的购物车，其中有多个复选框，每个复选框与一种商品及价格相关联。每选中一个复选框，就表示用户选定与之关联的商品，脚本程序立即算出商品的总金额，并显示在总价格区域中。如果取消先前选择的某个商品，脚本程序应立即从总金额中减去改商品的价格。
要编程实现上面的应用需求，最起码的一件事情就是要对每个复选框的onclick事件进行处理，在该事件处理程序中，首先要判断哪些复选框被选中，然后对所有选中的复选框的设置进行累加。如果为每个复选框都安排一个不同的名称，每个复选框在程序中的引用名称也就各不一样，这样，javascript在检查每个复选框是否被选中以及求出被选中复选框的设置值时，不可能用一段循环代码来统一处理所有的复选框，而要为访问每个复选框都编写单独的程序代码。另外，对于这样的应用，网页中显示的复选框个数以及相关内容，通常都是由asp，jsp等服务器程序从数据库中动态查询出来并生成的，数据库中的一条记录项对应一个复选框。由于数据库中的记录会有增减，所以复选框的个数是不确定的，在这种情况下，无法为每个复选框都事先安排好一个不同的名称，并在javascript脚本程序中引用这些名称。如果为每个复选框都安排一个完全相同的名称，只是各自的设置值（value属性）不尽相同，这样，在javascript中就可以用一个数组来访问这些复选框，从而可以使用一段循环语句来对每个复选框进行处理。程序代码如下：
<script language=javascript>
function checkSun()
{
var sum=0;
for( var i=0; i<document.form1.elements["writer"].length; i++)
{
if( document.form1.elements["writer"][i].checked)
{
sum=sum+parseInt(document.form1.elements["writer"][i].value);
}
}
totalprice.innerText =sum+"元"
}
</script>
<form action="" method=post name=form1>
<input type="checkbox" name=writer value="10" onclick="checkSun()">橡皮擦（10）元<br>
<input type="checkbox" name=writer value="20" onclick="checkSun()">橡皮擦（20）元<br>
<input type="checkbox" name=writer value="30" onclick="checkSun()">橡皮擦（30）元<br>
<input type="checkbox" name=writer value="40" onclick="checkSun()">橡皮擦（40）元<br>
<input type="checkbox" name=writer value="50" onclick="checkSun()">橡皮擦（50）元<br>
<input type="checkbox" name=writer value="60" onclick="checkSun()">橡皮擦（60）元<br>
<input type="submit" value="Submit" id=submit1 name=submit1><br>
总价为：<span id="totalprice">0元</span>
</form>
上一条： ps如何制作斜线图案背景
下一条： 前端开发网址大全
