实现简单购物车功能

来源：互联网发布：巩义共赢网络是什么编辑：程序博客网时间：2024/04/19 08:23

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

<!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>

阅读全文

0 0