來自起始價格和掉期圖像的總輸入量，具體取決於選定的單選框和復選框
[英]Total inputs from starting price & swap image depending on selected radio & checkboxes
問題描述
我正在嘗試使用多個選項來完成用於RV的構建和定價的腳本。 我已經對代碼進行了嘗試，但是我無法獲得“總價”來進行計算或“圖像切換”來進行工作。
在“總計”腳本上，我需要對其進行更改，使其起始價格為39,950.00。 不確定如何調整。 我在這里得到了這個腳本： http : //jsfiddle.net/b3p4r/
在“圖像切換”腳本上，我不確定自己在做什么錯。 我在這里得到了腳本，但是該腳本沒有復選框...所以我不確定在這里有什么問題。 根據兩個輸入單選按鈕顯示圖像
影像開關說明...
我對這個腳本的想法是所有圖像都經過格式化，因此無論是否選擇了一個選項，開關都將構建圖像URL。
我認為它應該如何工作...以下值需要確定。
graphicsValue-構建圖像的第一部分。 如果需要，這里有一個默認值。 這是一台收音機，因此將被選中。
awningValue-構建圖像URL的下一部分。 如果需要，這里有一個默認值。 這是一台收音機，因此將被選中。
kingValue-構建圖像URL的第三部分...如果未選中，則此部分將沒有任何值
solarValue-構建圖像URL的第四部分...如果未選中，則此部分將沒有值
genbaskValue-構建圖像URL的最后一部分，包括.jpg擴展名。 如果未選中，則僅返回.jpg以完成整個圖像URL
因此，如果選擇了圖形樣式3（gr-3） ， 則選擇了 灰色遮陽篷（遮陽灰） ， 選中了King-Dome（選擇國王） ， 未選中Solar（選擇了太陽能） ，並且選中了Generator Basket （選擇了- genbask） ...當您切換這些選擇中的每一個時，它將實時返回這些值，圖像將切換。
在上面的示例中，返回的URL為
/ images / build / Red / RB + GA + KD +（無）+ BA.jpg等於= /images/build/Red/RBGAKD.jpg （這是顯示的圖像。或者至少這就是我的方式希望它能工作...但不是。）
<script type='text/javascript'> // Script for image swap
$("input:radio[name='graphics'], input:radio[name='awning'], input:checkbox[name='opt-king'], input:checkbox[name='opt-solar'], input:checkbox[name=opt-'genbask']").click(function() { // This handler runs when any of the radio buttons are clicked.
var graphicsValue = $("input:radio[name='graphics']:checked").id(); // Find which graphics radio button is checked.
var awningValue = $("input:radio[name='awning']:checked").id(); // Find which awning radio button is checked.
var kingValue = $("input:checkbox[name='opt-king']:checked").id(); // Find if opt-king checkbox button is checked.
var solarValue = $("input:checkbox[name='opt-solar']:checked").id(); // Find if opt-solar checkbox button is checked.
var genbaskValue = $("input:checkbox[name='opt-genbask']:checked").id(); // Find if opt-genbask checkbox button is checked.
var image_name = ""; // Initialize the image name to blank. We will be appending as we go.
switch (graphicsValue) {
case 'gr-1':
image_name += "/images/build/Black/BL"; // Graphic Style 1 was selected, so use that value for the first part of the image.
break;
case 'gr-2':
image_name += "/images/build/Black2/BL"; // Graphic Style 2 was selected, so use that value for the first part of the image.
break;
case 'gr-3':
image_name += "/images/build/Red/RB"; // Graphic Style 3 was selected, so use that value for the first part of the image.
break;
case 'gr-4':
image_name += "/images/build/Red/RB"; // Graphic Style 4 was selected, so use that value for the first part of the image.
break;
case 'gr-5':
image_name += "/images/build/Blue/BU"; // Graphic Style 5 was selected, so use that value for the first part of the image.
break;
case 'gr-6':
image_name += "/images/build/Blue/BU"; // Graphic Style 6 was selected, so use that value for the first part of the image.
break;
case 'gr-7':
image_name += "/images/build/Pinstripe/Pin"; // Graphic Style 7 was selected, so use that value for the first part of the image.
break;
case 'gr-8':
image_name += "/images/build/Pinstripe/Pin"; // Graphic Style 1 was selected, so use that value for the first part of the image.
break;
default:
image_name += "/images/build/Black/BL"; // Make sure there is a default value, or a broken image could occur!
break;
}
switch (awningValue) {
case 'awn-gray':
image_name += "GA"; // Gray Awning was selected, so use that value for the second part of the image.
break;
case 'awn-blue':
image_name += "BA"; // Blue Awning was selected, so use that value for the second part of the image.
break;
default:
image_name += "BA"; // Make sure there is a default value, or a broken image could occur!
break;
}
switch (kingValue) {
case 'opt-king':
image_name += "KD"; // King-Dome was selected, so use that value for the third part of the image.
break;
default:
image_name += ""; // The default value for the checkbox in default state of not being checked.
break;
}
switch (solarValue) {
case 'opt-solar':
image_name += "SO"; // Solar was selected, so use that value for the fourth part of the image.
break;
default:
image_name += ""; // The default value for the checkbox in default state of not being checked.
break;
}
switch (genbaskValue) {
case 'opt-genbask':
image_name += "BA.jpg"; // Generator Basket was selected, so use that value for the last part of the image.
break;
default:
image_name += ".jpg"; // The default value for the checkbox in default state of not being checked. This adds .jpg to complete image if Generator Basket is not checked.
break;
}
$('#show_image_text').text(image_name); // Put the image URL
$('#Show_image').attr('src', image_name); // Put the image value in the formula image field src.
});
</script>
下一個腳本是用來格式化總價的腳本。 如果要將其顯示為輸入，則可以使其正常工作，但希望將其顯示在div中。 我還需要弄清楚如何在此處添加起價。
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
function formatCurrency(num) {
num = num.toString().replace(/\$|\,/g,'');
if(isNaN(num))
{num = "0";}
sign = (num == (num = Math.abs(num)));
num = num.toFixed(2);
elements= num.split(".");
num = elements[0];
cents = elements[1];
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
{num = num.substring(0,num.length-(4*i+3))+','+
num.substring(num.length-(4*0+3));}
return (((sign)?'':'-') + '$' + num + '.' + cents)
}
$("input").change(function() {
var total = 0;
$("input").each(function() {
if($(this).is(":checked"))
total += parseFloat($(this).val());
});
$("#total").val(formatCurrency(total));
});
}//]]>
</script>
</head>
這是我正在使用的HTML ...
<body>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<div style="background: #efefef; width: 600px; padding: 10px;">
<h3>Image Will be shown in this div</h3>
<img id="show_image" />
<img id="show_image_text" />
</div>
<div><h2 style=" text-align: left; color: #c84e1e !important;"><span style="font-size:20px; color: #222;">MSRP:</span> $<span id="total">39950.00</span></h2></div>
<form name="build">
<h2>Floor Plans</h2>
<div class="build-option">
<div class="build-left">
<div class="build-title"><input type="radio" name="floorplan" style="margin-top:-3px;" id="fp-stand" value="0.00" > Standard Floor Plan</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title"><input type="radio" name="floorplan" style="margin-top:-3px;" id="fp-tb" value="0.00" > Twin Bed Floor Plan</div>
</div>
<div class="build-right"></div>
</div>
<h2>Graphics</h2>
<div class="build-option">
<div class="build-left">
<div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-1" value="0.00" > Black/Gray Style 1</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-2" value="0.00"> Black/Gray Style 2</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-3" value="0.00"> Red/Blue Style 1</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-4" value="0.00"> Red/Blue Style 2</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-5" value="0.00"> Dark Blue/Light Blue Style 1</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-6" value="0.00"> Dark Blue/Light Blue Style 2</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-7" value="0.00"> Pinstripe Style 1 </div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-8" value="0.00"> Pinstripe Style 2</div>
</div>
<div class="build-right"></div>
</div>
<h2>Awnings</h2>
<div class="build-option">
<div class="build-left">
<div class="build-title"><input type="radio" name="awning" style="margin-top:-3px;" id="awn-gray" value="0.00"> Gray</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title"><input type="radio" name="awning" style="margin-top:-3px;" id="awn-blue" value="0.00"> Blue</div>
</div>
<div class="build-right"></div>
</div>
<h2>Flooring</h2>
<div class="build-option">
<div class="build-left">
<div class="build-title">Montreal<br />
<input type="radio" name="flooring" id="floor-montreal" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 1)"> $0 (Standard Option) </div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title">Canyon<br />
<input type="radio" name="flooring" id="floor-canyon" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 2)"> $0 (Standard Option)</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title">Parador<br />
<input type="radio" name="flooring" id="floor-parador" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 3)"> $0 (Standard Option)</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title">Flagstone<br />
<input type="radio" name="flooring" id="floor-flagstone" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 4)"> $0 (Standard Option)</div>
</div>
<div class="build-right"></div>
</div>
<h2>Fabrics</h2>
<div class="build-option">
<div class="build-left">
<div class="build-title">Black Marble<br />
<input type="radio" name="fabric" id="fab-marble" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 1)"> $0 (Standard Option)</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title">Mink<br />
<input type="radio" name="fabric" id="fab-mink" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 2)"> $0 (Standard Option)</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title">Ocean<br />
<input type="radio" name="fabric" id="fab-ocean" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 3)"> $0 (Standard Option)</div>
</div>
<div class="build-right"></div>
</div>
<h2>Countertops</h2>
<div class="build-option">
<div class="build-left">
<div class="build-title">Standard Countertops & Accents<br />
<input type="radio" name="fg-counter" id="count-stand" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 5)"> $0 (Standard Option)</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title">Paradise Beach Fiber-Granite<br />
<input type="radio" name="fg-counter" id="count-pb" style="margin-top:-3px;" value="1800.00" onClick="check_value(this, 1)"> $1,800</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title">Tahoe Fiber-Granite<br />
<input type="radio" name="fg-counter" id="count-tahoe" style="margin-top:-3px;" value="1800.00" onClick="check_value(this, 3)"> $1,800</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title">Baltic Fiber-Granite<br />
<input type="radio" name="fg-counter" id="count-baltic" style="margin-top:-3px;" value="1800.00" onClick="check_value(this, 2)"> $1,800</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title">Dakota Fiber-Granite<br />
<input type="radio" name="fg-counter" id="count-dakota" style="margin-top:-3px;" value="1800.00" onClick="check_value(this, 4)"> $1,800</div>
</div>
<div class="build-right"></div>
</div>
<h2>Options</h2>
<div class="build-option">
<div class="build-left">
<div class="build-title">King-Dome<br />
<input type="checkbox" name="opt-king" style="margin-top:-3px;" id="opt-king" value="1500.00"> $1,500</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title">Solar Package<br />
<input type="checkbox" name="opt-solar" style="margin-top:-3px;" id="opt-solar" value="1800.00"> $1,800</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title">Additional Awning<br />
<input type="checkbox" name="opt-awning" style="margin-top:-3px;" id="opt-awning" value="900.00"> $900</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title">Generator Quick Connect<br />
<input type="checkbox" name="opt-genquick" style="margin-top:-3px;" id="opt-genquick" value="469.00"> $469</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title">Generator Basket<br />
<input type="checkbox" name="opt-genbask" style="margin-top:-3px;" id="opt-genbask" value="250.00"> $250</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title">30lb Propane Tank Upgrade<br />
<input type="checkbox" name="opt-30pro" style="margin-top:-3px;" id="opt-30pro" value="99.00"> $99</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title">Four Trojan T-105 Batteries<br />
<input type="checkbox" name="opt-batt-t105" style="margin-top:-3px;" id="opt-batt-t105" value="400.00"> $400</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title">Four Trojan AGM Batteries<br />
<input type="checkbox" name="opt-batt-agm" style="margin-top:-3px;" id="opt-batt-agm" value="900.00"> $900</div>
</div>
<div class="build-right"</div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title">Wireless Back Up Camera<br />
<input type="checkbox" name="opt-cam" id="opt-cam" style="margin-top:-3px;" value="700.00"> $700</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title">Front Propane Quick Connect<br />
<input type="checkbox" name="opt-front-proconnect" style="margin-top:-3px;" id="opt-front-proconnect" value="170.00"> $170</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title">Back Propane Quick Connect<br />
<input type="checkbox" name="opt-back-proconnect" style="margin-top:-3px;" id="opt-back-proconnect" value="160.00"> $160</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title">Four Reading Light Package<br />
<input type="checkbox" name="opt-read" id="opt-read" style="margin-top:-3px;" value="199.00"> $199</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title">Large Inverter<br />
<input type="checkbox" name="opt-large-inv" style="margin-top:-3px;" id="opt-large-inv" value="1200.00"> $1,200</div>
</div>
<div class="build-right"></div>
</div>
<div class="build-option">
<div class="build-left">
<div class="build-title">Small Inverter<br />
<input type="checkbox" name="opt-small-inv" style="margin-top:-3px;" id="opt-small-inv" value="250.00"> $250</div>
</div>
<div class="build-right"></div>
</div>
</form>
</div>
</body>
</html>
1 個解決方案
解決方案1
0 已采納 2014-04-20 01:41:00
編輯2：
如所承諾的，您的代碼的有效版本： http : //jsfiddle.net/kychan/PL6fU/
您有一些錯誤，例如：
$("#total").html(formatCurrency(total));
- DIV（通常）沒有屬性“值”。 您必須使用html（）使其可見。
- 在您的代碼中未提供check_value，所以我做了一個假人。
總的來說，我認為這就是您想要的。 如果沒有，請及時更新，我會修復它！
注意：該代碼是安全的FAR。 我不確定您打算如何使用該代碼。 JavaScript在本地運行，並且很容易損壞（例如，在裝有Internet Explorer 6的舊計算機上）。
切勿過於依賴JavaScript。 如果您打算將代碼用於購買，我必須告知您客戶可以輕松更改值。
溫馨提示 ：
如果可能，將您的代碼封裝在函數/類中。 切勿重復您之前編寫的代碼。
同樣，將LOGIC與數據分開。 開關盒包含圖像的URL，對我來說，這些是數據。
您可以輕松地編寫一個構建整個html的簡單循環。 這減少了html和javascript代碼。 如果您要更改某些內容，則只需應用一條規則即可更改整個格式！
考慮一下架構。 您很有可能不是最后調查代碼的人。 如果有人想更改此代碼，則將花費一些時間。這就是為什么將代碼與數據分開（例如使用JSON）的原因。 然后，如果他們想添加另一個復選框，則只需添加一條JSON行即可使其生效！
真是的 重構代碼花了很長時間。 首先，強烈建議將數據和邏輯分開。這將改善調試效果，並允許其他人以正常方式查看代碼。
我花了兩個 （!!）個小時使代碼正常工作。 然后五分鍾添加所需的功能。
再也不！ 哈哈
這些步驟是：
- 以（開始+）總價存儲變量
- 自動從JSON生成字段/結構。
- 向他們添加聽眾。
- 單擊單擊單擊。
希望對您有所幫助（ 完整的版本 ）： http : //jsfiddle.net/kychan/rSVP7/7/embedded/result/
// storage of price (global).
var total = 39950;
// create list from JSON.
createList();
// show price in test div at start.
priceView.html(formatCurrency(total));
// function to update price on change.
function update(box) {
// calculate the price from the value of the selected box.
var price = parseInt(box.value, 10);
price = (isNaN(price)) ? 0 : price;
// if it is selected, you add the price.
if (box.checked) total += price;
// if not, then remove the price.
else total -= price;
// show the price on a test div.
priceView.html(formatCurrency(total));
// the image to load.
//img.html('<img src="{0}" />'.f($(box).data('img')));
img.html($(box).data('img'));
}
使用jQuery根據選擇的選項計算小計和總價
[英]Calculate subtotal and total price depending on selected options using jquery
單選按鈕/復選框/選擇選項 - 添加所選項目的價格（價值）總和，並將它們添加到數組中
[英]Radio Buttons/Checkboxes/select option- Adding price(value) total of chosen item, and also adding them in an array
我需要創建一個PayPal“立即付款”按鈕，該按鈕將根據選定的復選框識別總價
[英]I need to create a PayPal “Pay Now” button that will recognize the total price based on selected checkboxes
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.