![](/img/trans.png)
[英]Radio Buttons/Checkboxes/select option- Adding price(value) total of chosen item, and also adding them in an array
[英]Checkboxes/Radio Buttons- Adding price total of chosen item
我目前正在使用單選按鈕和復選框。 在此示例項目中,我具有單選按鈕和復選框,這些按鈕和復選框根據用戶選擇的值顯示圖像。
如何為所選的每個項目添加價格價格並在底部顯示總成本? 例
下面的js顯示了我根據所選值顯示圖像的過程。
JS
<script>
function check_value(currentElement, val, id, type) {
var el = document.getElementById("imgBox" + id);
if (val > 0 && val < 4) { //will trigger when [1,2,3]
if(currentElement.checked)
{
el.src = "images/" + type + val + ".jpg";
el.style.display = "";
}
else
{
el.src = "";
el.style.display = "none";
}
}
}
</script>
HTML
<h2>Choose a bike</h2>
<form name="builder">
<input type="radio" name="field" onclick='check_value(this, 1, 1, "bike")'/> KAWASAKI KX 450F- $8,399<br />
<input type="radio" name="field" onclick='check_value(this, 2, 1, "bike")'/> 2010 Yamaha Road Star S- $13,090<br />
<input type="radio" name="field" onclick='check_value(this, 3, 1, "bike")'/> Aprilia RSV4- $16,999<br />
</form>
<img id="imgBox1" src="#" style="display:none">
<h2>Choose a tire</h2>
<form name="tire">
<input type="radio" name="field" onclick='check_value(this, 1, 2, "tire")'/> Michelin Pilot Road 3 Tires- $299.99<br />
<input type="radio" name="field" onclick='check_value(this, 2, 2, "tire")'/> Dunlop Roadsmart Sport-Touring Tires- $154.99<br />
<input type="radio" name="field" onclick='check_value(this, 3, 2, "tire")'/> Pirelli Scorpion Trail Tires- $119.99<br />
</form>
<img id="imgBox2" src="#" style="display:none">
<h2>Choose Accesories</h2>
<form name="tire">
<input type="checkbox" name="field" onclick='check_value(this, 1, "3a", "accessories")'/> Chrome Front Plate- $246.50<br />
<input type="checkbox" name="field" onclick='check_value(this, 2, "3b", "accessories")'/> Jacket- $87.99<br />
<input type="checkbox" name="field" onclick='check_value(this, 3, "3c", "accessories")'/> Gloves- $35.99
</form>
<div id="accessories">
<img id="imgBox3a" src="#" style="display:none">
<img id="imgBox3b" src="#" style="display:none">
<img id="imgBox3c" src="#" style="display:none">
</div>
我會開始
for-loop
以計算當前總數 我們來了 ...
<head>
<title></title>
<script>
function check_value(curElem, id) {
var el = document.getElementById("img" + curElem.name);
el.src = "images/" + curElem.name + id + ".jpg";
if (!curElem.checked)
el.style.display = "none";
else
el.style.display = "block";
// calculate Total
var total = 0;
var controls = document.getElementsByTagName('input');
for (var i = 0; i < controls.length; i++) {
if ((controls[i].type === 'radio' || controls[i].type === 'checkbox') && controls[i].checked)
total = total + parseFloat(controls[i].value);
}
document.getElementById("total").innerHTML = total;
//alert("Total: " + total);
}
</script>
</head>
<body>
<form name="builder">
<h2>
Choose a bike</h2>
<input type="radio" name="Bike" value="8399" onclick='check_value(this, 1)' />
KAWASAKI KX 450F- $8,399<br />
<input type="radio" name="Bike" value="13090" onclick='check_value(this, 2)' />
2010 Yamaha Road Star S- $13,090<br />
<input type="radio" name="Bike" value="16999" onclick='check_value(this, 3)' />
Aprilia RSV4- $16,999<br />
<img id="imgBike" src="#" style="display: none" />
<h2>
Choose a tire</h2>
<input type="radio" name="Tire" value="299.99" onclick='check_value(this, 1)' />
Michelin Pilot Road 3 Tires- $299.99<br />
<input type="radio" name="Tire" value="154.99" onclick='check_value(this, 2)' />
Dunlop Roadsmart Sport-Touring Tires- $154.99<br />
<input type="radio" name="Tire" value="119.99" onclick='check_value(this, 3)' />
Pirelli Scorpion Trail Tires- $119.99<br />
<img id="imgTire" src="#" style="display: none" />
<h2>
Choose Accesories</h2>
<input type="checkbox" name="FrontPlate" value="246.50" onclick='check_value(this, "")' />
Chrome Front Plate- $246.50<br />
<input type="checkbox" name="Jacket" value="87.90" onclick='check_value(this, "")' />
Jacket- $87.99<br />
<input type="checkbox" name="Gloves" value="35.99" onclick='check_value(this, "")' />
Gloves- $35.99
<div id="accessories">
<img id="imgFrontPlate" src="#" style="display: none" />
<img id="imgJacket" src="#" style="display: none" />
<img id="imgGloves" src="#" style="display: none" />
</div>
<div id="total"></div>
</form>
</body>
盡管這可能是您的答案的解決方案 -我看不到使用此代碼。 在現實環境中, 大多數數據將來自服務器生成的服務器,因此您必須完全重新執行此代碼 !
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.