您的位置：首页 > 其它

实现简单购物车功能

2017-10-23 15:16 645 查看

说明：选择需要购买的物品，计算总价。

<!DOCTYPE html>
<html>
<head></body>
<link href="sohudiv.css" rel="stylesheet" type="text/css"/>
<script language="javascript" type="text/javascript">
function gouwu(obj){
var fruits= document.getElementsByName("fruit");
var totalPrice=0;
//遍历所有的checkbox，计算新的总价
for(var i=0;i<fruits.length;i++){
//判断是否选择
if(fruits[i].checked){
totalPrice+=parseFloat(fruits[i].value);
}
}
myspan.innerText=totalPrice+"元";
}

function selectCheck(obj){
var fruits=document.getElementsByName("fruit");
if(obj.innerText=='全选'){
for(i=0;i<fruits.length;i++){
fruits[i].checked=true;
}
}else{
for(i=0;i<fruits.length;i++){
fruits[i].checked=false;
}
}
}

//响应复选框
function selectCheck2(){
var fruits=document.getElementsByName("fruit");
if(myselect.checked){
for(i=0;i<fruits.length;i++){
fruits[i].checked=true;
}
}else{
for(i=0;i<fruits.length;i++){
fruits[i].checked=false;
}
}
}
</script>
<body>
<h1>我的购物车</h1>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="10"/>苹果10元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="20"/>香蕉20元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="30"/>西瓜30元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="40"/>栗子40元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="50"/>哈密瓜50元<br/>
<p>总价格是<span id="myspan">0元</span></p>
<a href="#" onclick="selectCheck(this)">全选</a>
<a href="#" onclick="selectCheck(this)">取消</a><br/>
<input type="checkbox" id="myselect" onclick="selectCheck2()"/>是否全选
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航