<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兒童書籍-商品備選區</title>
<style type="text/css">
table{width:1000px;height:600px;}
td{text-align: center;vertical-align: middle;}
.theButton{width:100px;height:60px;margin: 20px;border: 2px groove #33ff66;}
</style>
<script type="text/javascript">
var result;
var product=new Array("紅色羊齒草的故鄉","綠野仙蹤","開往快樂谷的地鐵","胡小鬧日記","幸運的米拉全集","小豬唏哩呼嚕");
var price=new Array(27.0,39.8,36.0,11.0,500.0,68.3);
var isSelected=new Array(0,0,0,0,0,0);
function clearAll()
{
isSelected=[0,0,0,0,0,0];
myForm.sp0.checked=false;
myForm.sp1.checked=false;
myForm.sp2.checked=false;
myForm.sp3.checked=false;
myForm.sp4.checked=false;
myForm.sp5.checked=false;
}
function checkOut()
{
var count=0;
var total=0;
for (i=0;i<isSelected.length;i++)
{
count+=isSelected[i];
}
for (i=0;i<price.length;i++)
{
total=total+price[i]*isSelected[i];
}
alert("您所選購的"+count+"件，產品總價="+total+"\n"+"請去支付！");
}
function shoppingSelect()
{
var selectList=""
for (j=0;j<procuct.length;j++)
{
if (isSelected[j])
{
selectList+=(j+1)+"-"+product[j]+"，價值="+price[j]+"\n";
}
}
var info=(selectList="")? "您的購物車為空，請購選！":selectList;
alert(info);
}
function checkSelect(number)
{
var temp;
switch(number)
{
case 0
temp=myForm.sp0.checked;break;
case 1
temp=myForm.sp1.checked;break;
case 2
temp=myForm.sp2.checked;break;
case 3
temp=myForm.sp3.checked;break;
case 4
temp=myForm.sp4.checked;break;
case 5
temp=myForm.sp5.checked;break;
}
isSelected[number]=(temp)?1:0;
}
</script>
</head>
<body>
<form name="myForm" method="post" action="">
<table align="center" border="1">
<caption>兒童書籍-商品備選區</caption>
<tr>
<td><img src="https://img.uj5u.com/2021/04/30/174557300720401.jpg" width="300" height="200" /><br />
<h4>紅色羊齒草的故鄉</h4>
<input type="checkbox" name="sp0" value="https://bbs.csdn.net/topics/27.0" onclick="checkSelect(0);"/>￥ 27.0<br />
</td>
<td><img src="https://img.uj5u.com/2021/04/30/174557300720402.png" width="300" height="200"/><br />
<h4>綠野仙蹤</h4>
<input type="checkbox" name="sp1" value="https://bbs.csdn.net/topics/39.8" onclick="checkSelect(1);"/>￥ 39.8<br />
</td>
<td><img src="https://img.uj5u.com/2021/04/30/174557300720403.png" width="300" height="200" /><br />
<h4>開往快樂谷的地鐵</h4>
<input type="checkbox" name="sp2" value="https://bbs.csdn.net/topics/36.0" onclick="checkSelect(2);"/>￥ 36.0<br />
</td>
</tr>
<tr>
<td><img src="https://img.uj5u.com/2021/04/30/174557300720404.png" width="300" height="200" /><br />
<h4>胡小鬧日記</h4>
<input type="checkbox" name="sp3" value="https://bbs.csdn.net/topics/11.0" onclick="checkSelect(3);"/>￥ 11.0<br />
</td>
<td><img src="https://img.uj5u.com/2021/04/30/174557300720405.png" width="300" height="200" /><br />
<h4>幸運的米拉全集</h4>
<input type="checkbox" name="sp4" value="https://bbs.csdn.net/topics/500.0" onclick="checkSelect(4);"/>￥ 500.0<br />
</td>
<td><img src="https://img.uj5u.com/2021/04/30/174557300720406.png" width="300" height="200" /><br />
<h4>小豬唏哩呼嚕</h4>
<input type="checkbox" name="sp5" value="https://bbs.csdn.net/topics/68.3" onclick="checkSelect(5);"/>￥ 68.3<br />
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" class="theButton" value="https://bbs.csdn.net/topics/查看購物車" onclick="shoppingSelect();"/>
<input type="button" class="theButton" value="https://bbs.csdn.net/topics/收銀臺結算" onclick="checkOut();"/>
<input type="button" class="theButton" value="https://bbs.csdn.net/topics/初始化引數" onclick="clearAll();"/>
</td>
</tr>
</table>
</form>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/281589.html
標籤：JavaScript