时间戳

首页 > 解决方案 > HTML 和 JavaScript 中的购物车

javascript - HTML 和 JavaScript 中的购物车

问题描述

这就是我到目前为止所拥有的。我希望能够拥有它，因此，当检查复选框时，物品将总计价值。我不知道代码有什么问题，我一直在关注 youtube 视频。

检查的项目可能一样多。这是我想做的购物车的简单版本。

var Cost,Grand_Total,GST,PST;
function price() {
	Cost = 0;
	Cost = dollar(Cost);
	if (document.orderform.Item1.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item2.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item3.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item4.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item5.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item6.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item7.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item8.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item9.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item10.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item11.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item12.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item13.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item14.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item15.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item16.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item17.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item18.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item19.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item20.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item21.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item22.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item23.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item24.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item25.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item26.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item27.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item28.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item29.checked) {Cost = Cost + 5.00;}
	if (document.orderform.Item30.checked) {Cost = Cost + 5.00;}
	GST = (Cost*0.07);
	PST = (Cost*0.07);
	GST = dollar(GST);
	PST = dollar(PST);
	Grand_Total = parseFloat(Cost) + parseFloat(GST) + parseFloat(PST);
	Grand_Total = dollar(Grand_Total);
	document.orderform.Total.value = "$" + Cost;
	document.orderform.GST.value = "$" + GST;
	document.orderform.PST.value = "$" + PST;
	document.orderform.GrandTotal.value = "$" + Grand_Total;
}

function dollar (amount) {
	amount = parseInt(amount*100);
	amount = parseFloat(amount/100);
	if (((amount) == Math.floor(amount))&&((amount - Math.floor(amount)) == 0))
	{
		amount = amount + ".00"
		return amount;
	}
	if (((amount*10) - Math.floor(amount*10)) == 0) {
		amount = amount + "0";
		return amount;
	}
	if (((amount*100 - Math.floor(amount*100)) == 0) {
		amount = amount;
		return amount;
	}
	return amount;
}
	
<form method="post" name="orderform" action="mailto:xolilyle@gmail.com">
<table style="margin-left: 22.5%; margin-top: 3%; position: absolute; font-size: 20px;">
<tr> <td colspan="4">
<input type="checkbox" name="Item" value="Item1_chosen" onclick="price()"> 1. Dragon ($5.00) <br>
<input type="checkbox" name="Item" value="Item2_chosen" onclick="price()"> 2. Galaxy ($5.00) <br>
<input type="checkbox" name="Item" value="Item3_chosen" onclick="price()"> 3. Wolves ($5.00) <br>
<input type="checkbox" name="Item" value="Item4_chosen" onclick="price()"> 4. Jaguar ($5.00) <br>
<input type="checkbox" name="Item" value="Item5_chosen" onclick="price()"> 5. New Years ($5.00) <br>
<input type="checkbox" name="Item" value="Item6_chosen" onclick="price()"> 6. Festive ($5.00) <br>
<input type="checkbox" name="Item" value="Item7_chosen" onclick="price()"> 7. Fierce ($5.00) <br>
<input type="checkbox" name="Item" value="Item8_chosen" onclick="price()"> 8. Support ($5.00) <br>
<input type="checkbox" name="Item" value="Item9_chosen" onclick="price()"> 9. Luck ($5.00) <br>
<input type="checkbox" name="Item" value="Item10_chosen" onclick="price()"> 10. Amor ($5.00) <br>
<input type="checkbox" name="Item" value="Item11_chosen" onclick="price()"> 11. Halloween ($5.00) <br>
<input type="checkbox" name="Item" value="Item12_chosen" onclick="price()"> 12. Domino ($5.00) <br>
<input type="checkbox" name="Item" value="Item13_chosen" onclick="price()"> 13. Banana ($5.00) <br>
<input type="checkbox" name="Item" value="Item14_chosen" onclick="price()"> 14. Sea ($5.00) <br>
<input type="checkbox" name="Item" value="Item15_chosen" onclick="price()"> 15. Popcorn ($5.00) <br>
<input type="checkbox" name="Item" value="Item16_chosen" onclick="price()"> 16. Gamer ($5.00) <br>
<input type="checkbox" name="Item" value="Item17_chosen" onclick="price()"> 17. Forest ($5.00) <br>
<input type="checkbox" name="Item" value="Item18_chosen" onclick="price()"> 18. Pillar ($5.00) <br>
<input type="checkbox" name="Item" value="Item19_chosen" onclick="price()"> 19. Snake ($5.00) <br>
<input type="checkbox" name="Item" value="Item20_chosen" onclick="price()"> 20. Bumble ($5.00) <br>
<input type="checkbox" name="Item" value="Item21_chosen" onclick="price()"> 21. Dungeon ($5.00) <br>
<input type="checkbox" name="Item" value="Item22_chosen" onclick="price()"> 22. Mystical ($5.00) <br>
<input type="checkbox" name="Item" value="Item23_chosen" onclick="price()"> 23. Grassy ($5.00) <br>
<input type="checkbox" name="Item" value="Item24_chosen" onclick="price()"> 24. Warriors ($5.00) <br>
<input type="checkbox" name="Item" value="Item25_chosen" onclick="price()"> 25. Fire ($5.00) <br>
<input type="checkbox" name="Item" value="Item26_chosen" onclick="price()"> 26. Wood ($5.00) <br>
<input type="checkbox" name="Item" value="Item27_chosen" onclick="price()"> 27. Sky ($5.00) <br>
<input type="checkbox" name="Item" value="Item28_chosen" onclick="price()"> 28. Pure ($5.00) <br>
<input type="checkbox" name="Item" value="Item29_chosen" onclick="price()"> 29. Crystal ($5.00) <br>
<input type="checkbox" name="Item" value="Item30_chosen" onclick="price()"> 30. Pumpkin ($5.00) <br>
<input type="checkbox" name="Item" value="Item31_chosen" onclick="price()"> 31. Mint ($5.00) <br>
</td>
</tr>
<tr>
<td> Your Total <input type="text" name="Total" value="$0" size="8" id="jom"></td>
<td> PST (7%) <input type="text" name="PST" value="$0"  size="6"></td>
<td colspan="2"> GST (7%) <input type="text" name="GST" value="$0" size="6"> </td>
</tr>
<tr>
<td> Your Total Price Altogether: <input type="text" name="GrandTotal" value="$0" size="8"> </td>
</tr>
<td> Your Contact Name: </td>
<td> First <input type="text" name="firstname" size="15" maxlength="20"> Last <input type="text" name="LastName" size="15" maxlength="20"> </td>
</tr>
<tr>
<td> Your Address: </td>
<td> <input type="text" name="city" size="20" maxlength="20"> </td>
<td> Province/State: </td>
<td> <input type="text" name="province" size="20" maxlength="30"> </td>
</tr>
<tr>
<td> Phone number: </td>
<td> <input type="text" name="area" size="3" maxlength="5"> <input type="text" name="phone" size="8" maxlength="10"> </td>
</tr>
<td> Email Address: </td>
<td colspan="2"> <input type="text" name="email" size="30" maxlength="30"> </td>
</tr>
<tr>
<td colspan="4" height="3"> <hr> </td> 
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Send Your Order"></td>
<td colspan="2" align="center"> <input type="reset" value="Reset Your Orders"> </td> 
</tr>
</table>
</form>

标签： javascript

解决方案

您需要更改复选框项目的名称。
在所有复选框的表单元素中，您提供了相同的名称

<input type="checkbox" name="Item"/>

这意味着您只为所有复选框引用一个项目，而不是您需要为不同的文本框创建不同的名称并获取它的值

<input type="checkbox" name="Item1"/>
<input type="checkbox" name="Item2"/>
<input type="checkbox" name="Item3"/>
.
.
<input type="checkbox" name="Item30"/>

推荐阅读