js实现简单的购物车有图有代码

前端技术 2023/09/04 JavaScript
如图：
 
全选按钮的实现为：
复制代码 代码如下:

<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值加起来。

本文地址：https://www.stayed.cn/item/9812

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案