實現簡單購物車功能
阿新 • • 發佈:2019-02-02
說明:選擇需要購買的物品,計算總價。
<!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>