学习js的一点心得——js实现简单的购物车

来源：互联网发布：淘宝买麻古暗语编辑：程序博客网时间：2024/05/24 02:37

如图：

全选按钮的实现为：

<input type="checkbox" name="all" onclick="checkAll()" />全选<br /><input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br /><input type="checkbox" name="item"  value="3000" />笔记本电脑：3000元<br /><input type="checkbox" name="item"  value="3000" />笔记本电脑：3000元<br /><input type="checkbox" name="item"  value="3000" />笔记本电脑：3000元<br /><input type="checkbox" name="item"  value="3000" />笔记本电脑：3000元<br /><input type="checkbox" name="item"  value="3000" />笔记本电脑：3000元<br /><input type="checkbox" name="item"  value="3000" />笔记本电脑：3000元<br /><input type="checkbox" name="item" value="3000"  />笔记本电脑：3000元<br /><input type="checkbox" name="item" value="3000"  />笔记本电脑：3000元<br /><input type="checkbox" name="item"  value="3000" />笔记本电脑：3000元<br /><input type="checkbox" name="all" onclick="checkAll()" />全选<br /><input type="button" value="获取总金额" onclick="getSum()" /><span id="sum"></span>

最后的span标签是用来存放显示总金额的区域。

实现两个“全选”功能的代码是：

function checkAll(){//var allNode = document.getElementsByName("all")[0];//获取被点击的元素var allNode = event.srcElement;var item = document.getElementsByName("item");for(var x=0;x<item.length;x++){item[x].checked = allNode.checked;}}

event.srcElement实现了对响应事件按钮的获取。

for循环将每个多选框修改checked属性。

计算总金额的方法为：

function getSum(){var item = document.getElementsByName("item");var sum = 0;for(var x=0;x<item.length;x++){if(item[x].checked){sum+=parseInt(item[x].value);}}var spanNode = document.getElementById("sum");spanNode.innerHTML = (sum+"元").fontsize(7);}

将所有被选中的复选框的value值加起来。

0 0