【发布时间】：2014-03-17 05:53:32
【问题描述】：
我觉得应该是一个简单的请求，但我在任何地方都找不到简单的答案。不过我的问题会很长。
我正在尝试为网站http://oactechnology.com/phonesystemquotetool 创建一个脚本。如您所见，如果您输入您想要的手机类型的数量和您想要的服务器等级，就会得到一个总价（见页面底部）。
我最近也在尝试添加一些输入转盘。该表单有 5 个无线电输入：
<input class="num-pallets-radio" name="equipment-radio" type="radio" value="$400">SIP</input><br>
<input class="num-pallets-radio" name="equipment-radio" type="radio" value="$500">PRI</input><br>
<input class="num-pallets-radio" name="equipment-radio" type="radio" value="$600">Analog (4 Lines)</input><br>
<input class="num-pallets-radio" name="equipment-radio" type="radio" value="$700">Analog (8 Lines)</input><br>
<input class="num-pallets-radio" name="equipment-radio" type="radio" value="$800">Analog (24 Lines)</input><br>
<input class="num-pallets-radio" name="equipment-radio" type="radio" checked="checked" value="$0">Dont Know</input>
I would like it so that when a radio input is selected, the value changes from "0" to "1".如果用户改变主意并选择不同的无线电输入，则新选择的无线电输入将其值从“0”更改为“1”，而先前的无线电输入现在未选中，则返回值为“0”。该值是 1 或 0，用于输入选择的价格。
这里是 phonesystemquotetool 页面的完整 HTML/PHP 脚本：
<table id="order-table">
<tr>
<th class="thfiller" width="200px"></th>
<th class="thname">Phone Type</th>
<th class="thquantity">Quantity</th>
</tr>
<tr class="odd">
<td class="product-image"><img id="product-image" src="phoneimages/Polycom_SoundPoint_IP_650.png"><br><center><a href="pdf/soundpoint_ip650_datasheet.pdf" target="_new">View PDF</a></center></td>
<td class="product-title"><p><b>Polycom SoundPoing IP 650</b></p><p>Designed to appeal to both executive users who require advanced features and applications, and telephone attendants who need multiple line support, the Polycom SoundPoint IP 650 sets a new standard for high-performance IP phones.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="650-num-pallets" name="Polycom_SoundPoint_IP_650"></input></td>
<td class="price-per-pallet" style="display:none">$<span>599</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="650-row-total" disabled="disabled"></input></td>
</tr>
<tr class="even">
<td class="product-image"><img id="product-image" src="phoneimages/Polycom_SoundPoint_IP_560.png"><br><center><a href="pdf/soundpoint_ip560_datasheet.pdf" target="_new">View PDF</a></center></td>
<td class="product-title"><p><b>Polycom SoundPoint IP 560</b></p><p>The four-line SoundPoint IP 560 desktop phone delivers calls of unprecedented richness and clarity and supports a comprehensive range of cutting-edge features.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="560-num-pallets" name="Polycom_SoundPoint_IP_560"></input></td>
<td class="price-per-pallet" style="display:none">$<span>615</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="560-row-total" disabled="disabled"></input></td>
</tr>
<tr class="odd">
<td class="product-image"><img id="product-image" src="phoneimages/Polycom_soundPoint_IP_450.png"><br><center><a href="pdf/soundpoint_ip450_datasheet.pdf" target="_new">View PDF</a></center></td>
<td class="product-title"><p><b>Polycom SoundPoint IP 450</b></p><p>The SoundPoint IP 450 desktop phone is designed to bring advanced telephony features and applications to cubicle/office workers handling a moderate volume of calls.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="450-num-pallets" name="Polycom_soundPoint_IP_450"></input></td>
<td class="price-per-pallet" style="display:none">$<span>542</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="450-row-total" disabled="disabled"></input></td>
</tr>
<tr class="even">
<td class="product-image"><img id="product-image" src="phoneimages/Polycom_soundPoint_IP_335.png"><br><center><a href="pdf/soundpoint_ip335_datasheet.pdf" target="_new">View PDF</a></center></td>
<td class="product-title"><p><b>Polycom SoundPoint IP 335</b></p><p>The SoundPoint IP 335 phone delivers a business grade telephony endpoint at an entry-level price.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="335-num-pallets" name="Polycom_soundPoint_IP_335.png"></input></td>
<td class="price-per-pallet" style="display:none">$<span>465</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="335-row-total" disabled="disabled"></input></td>
</tr>
<tr class="odd">
<td class="product-image"><img id="product-image" src="phoneimages/Polycom_VVX_1500.png"><br><center><a href="pdf/vvx1500_datasheet.pdf" target="_new">View PDF</a></center></td>
<td class="product-title"><p><b>Polycom VVX 1500</b></p><p>The VVX 1500 is an ideal all-in-one productivity tool for todays busy executives and professionals, whether they are in office, retail, professional services, or healthcare environments.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="1500-num-pallets" name="Polycom_VVX_1500"></input></td>
<td class="price-per-pallet" style="display:none">$<span>1094</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="1500-row-total" disabled="disabled"></input></td>
</tr>
<tr class="even">
<td class="product-image"><img id="product-image" src="phoneimages/Aastra_9143i.png"><br><center><a href="pdf/aastra_9143i_datasheet.pdf" target="_new">View PDF</a></center></td>
<td class="product-title"><p><b>Aastra 9143i</b></p><p>Our standard basic phone. The 9143i is ideally suited as an everyday desk phone for moderate telephone users.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="9143i-num-pallets" name="Aastra_9143i"></input></td>
<td class="times" style="display:none">X</td>
<td class="price-per-pallet" style="display:none">$<span>445</span></td>
<td class="equals" style="display:none">=</td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="9143i-row-total" disabled="disabled"></input></td>
</tr>
<tr class="odd">
<td class="product-image"><img id="product-image" src="phoneimages/Polycom_SoundStation_Phone_IP_6000.png"><br><center><a href="pdf/soundstation_ip6000_datasheet.pdf" target="_new">View PDF</a></center></td>
<td class="product-title"><p><b>Polycom SoundStation Phone IP 6000</b></p><p>The SoundStation IP 6000 is an advanced IP conference phone that delivers superior performance for small to midsize conference rooms.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="6000-num-pallets" name="Polycom_SoundStation_Phone_IP_6000"></input></td>
<td class="price-per-pallet" style="display:none">$<span>976</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="6000-row-total" disabled="disabled"></input></td>
</tr>
<tr class="even">
<td class="product-image"><img id="product-image" src="phoneimages/Polycom_SoundPoint_IP_650_Expansion_Module.png"><br><center><a href="pdf/soundpoint_ip650_expansion_module_datasheet.pdf" target="_new">View PDF</a></center></td>
<td class="product-title"><p><b>Polycom SoundPoint Backlit IP 650 Expansion Module</b></p><p>The SoundPoint IP Backlit Expansion Module boosts telephone attendant productivity with enhanced user interface and advanced call handling capabilities.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="650-expansion-num-pallets" name="Polycom_SoundPoint_IP_650_Expansion_Module"></input></td>
<td class="price-per-pallet" style="display:none">$<span>839.45</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="650-expansion-row-total" disabled="disabled"></input></td>
</tr>
<tr class="odd">
<td class="product-image"><img id="product-image" src="phoneimages/Panasonic_KX-TGP500_Cordless_Phone.png"></td>
<td class="product-title"><p><b>Panasonic KX-TGP500 Cordless Phone</b></p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="Panasonic_KX-TGP500_Cordless_Phone"></input></td>
<td class="price-per-pallet" style="display:none">$<span>400</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
</tr>
<tr>
<th class="thfiller" width="200px"></th>
<th class="thname">Server Grade</th>
<th class="thquantity">Quantity</th>
</tr>
<tr class="even">
<td class="product-image"><img id="product-image" src="phoneimages/Asterisk-Phone-System-Standard.jpg" width="149px" height="200px"></td>
<td class="product-title"><p><b>Inexpensive Server</b></p><p>Recommended for up to 15 extensions</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="Asterisk-Phone-System-Standard"></input></td>
<td class="price-per-pallet" style="display:none">$<span>1500</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
</tr>
<tr class="odd">
<td class="product-image"><img id="product-image" src="phoneimages/2941-1.jpg" width="149px" height="200px"></td>
<td class="product-title"><p><b>Standard Server</b></p><p>Recommended for 5 to 25 extensions</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="2941-1"></input></td>
<td class="price-per-pallet" style="display:none">$<span>1750</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
</tr>
<tr class="even">
<td class="product-image"><img id="product-image" src="phoneimages/Asterisk-Phone-System-Rack-Mount.jpg"></td>
<td class="product-title"><p><b>Standard Server Rack Mount</b></p><p>Recommended for 5 to 25 extensions</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="Asterisk-Phone-System-Rack-Mount"></input></td>
<td class="price-per-pallet" style="display:none">$<span>1750</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
</tr>
<tr class="odd">
<td class="product-image"><img id="product-image" src="phoneimages/dell_poweredge_t605.png" width="149px" height="200px"></td>
<td class="product-title"><p><b>Enterprise Server</b></p><p>Recommended for 25 or more extensions</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="dell_poweredge_t605"></input></td>
<td class="price-per-pallet" style="display:none">$<span>3943</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
</tr>
<tr class="even">
<td class="product-image"><img id="product-image" src="phoneimages/dell_poweredge_r200.png"></td>
<td class="product-title"><p><b>Enterprise Server Rack Mount</b></p><p>Recommended for 25 or more extensions</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="dell_poweredge_r200t"></input></td>
<td class="price-per-pallet" style="display:none">$<span>4943</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
</tr>
<tr style="display:none">
<td colspan="6" style="text-align: right;"><br>
<input type="text" class="total-box" value="$0" id="product-subtotal" disabled="disabled" name="order-subtotal"></input>
</td>
</tr>
</table>
<hr width="100%">
<table id="shipping-table" style="display:none">
<tr>
<th>Total Qty.</th>
<th>X</th>
<th>Labor Rate</th>
<th>=</th>
<th style="text-align: right;">Labor Total</th>
</tr>
<tr>
<td id="total-pallets"><input id="total-pallets-input" value="0" type="text" disabled="disabled"></input></td>
<td>X</td>
<td id="shipping-rate">0</td>
<td>=</td>
<td style="text-align: right;"><input type="text" class="total-box" value="$0" id="shipping-subtotal" disabled="disabled" name="labor-subtotal"></input></td>
</tr>
</table>
<div class="clear"></div>
<table width="100%">
<tr>
<td>
<b>Do you know how your equipment currently interfaces with the phone company?</b><br><br>
<input class="num-pallets-radio" name="equipment-radio" type="radio" value="$400">SIP</input><br>
<input class="num-pallets-radio" name="equipment-radio" type="radio" value="$500">PRI</input><br>
<input class="num-pallets-radio" name="equipment-radio" type="radio" value="$600">Analog (4 Lines)</input><br>
<input class="num-pallets-radio" name="equipment-radio" type="radio" value="$700">Analog (8 Lines)</input><br>
<input class="num-pallets-radio" name="equipment-radio" type="radio" value="$800">Analog (24 Lines)</input><br>
<input class="num-pallets-radio" name="equipment-radio" type="radio" checked="checked" value="$0">Dont Know</input>
</td>
<td>
<div style="text-align: right;">
<span><b>Estimate:</b><br></span>
<input type="text" class="total-box" value="$0" id="order-total" disabled="disabled" name="order-total"></input>
<!-- <br><br>
<div style="float: right;">
<p><b>Your Name:</b><input type="text" name="name" size="50"></p>
<p><b>Your Email:</b><input type="text" name="email"></p>
<p><b>Your Phone:</b><input type="text" name="phone"></p>
<input type="submit" value="Submit Quote" class="submit-order" id="submit-order" name="submit" />
</div> -->
</div>
</td>
</tr>
</table>
这是标题：
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type='text/javascript' src='js/order.js'></script>
这里是拉取的order.js：
// UTILITY FUNCTIONS
function IsNumeric(n) {
return !isNaN(n);
}
function CleanNumber(value) {
// Assumes string input, removes all commas, dollar signs, and spaces
newValue = value.replace(",","");
newValue = newValue.replace("$","");
newValue = newValue.replace(/ /g,'');
return newValue;
}
function CommaFormatted(amount) {
var delimiter = ",";
var i = parseInt(amount);
if(isNaN(i)) { return ''; }
i = Math.abs(i);
var minus = '';
if (i < 0) { minus = '-'; }
var n = new String(i);
var a = [];
while(n.length > 3)
{
var nn = n.substr(n.length-3);
a.unshift(nn);
n = n.substr(0,n.length-3);
}
if (n.length > 0) { a.unshift(n); }
n = a.join(delimiter);
amount = "$" + minus + n;
return amount;
}
// ORDER FORM UTILITY FUNCTIONS
function applyName(klass, numPallets) {
var toAdd = $("td." + klass).text();
var actualClass = $("td." + klass).attr("rel");
$("input." + actualClass).attr("value", numPallets + " pallets");
}
function removeName(klass) {
var actualClass = $("td." + klass).attr("rel");
$("input." + actualClass).attr("value", "");
}
function calcTotalPallets() {
var totalPallets = 0;
$(".num-pallets-input").each(function() {
var thisValue = parseInt($(this).val());
if ( (IsNumeric(thisValue)) && (thisValue != '') ) {
totalPallets += parseInt(thisValue);
};
});
$("#total-pallets-input").val(totalPallets);
}
function calcProdSubTotal() {
var prodSubTotal = 0;
$(".row-total-input").each(function() {
var valString = $(this).val() || 0;
prodSubTotal += parseInt(valString);
});
$("#product-subtotal").val(CommaFormatted(prodSubTotal));
}
function calcShippingTotal() {
var totalPallets = $("#total-pallets-input").val() || 0;
var shippingRate = $("#shipping-rate").text() || 0;
var shippingTotal = totalPallets * shippingRate;
$("#shipping-subtotal").val(CommaFormatted(shippingTotal));
}
function calcOrderTotal() {
var orderTotal = 0;
var productSubtotal = $("#product-subtotal").val() || 0;
var radioPrice = $('.num-pallets-radio:checked').val() || 0;
var underTotal = $("#under-box").val() || 0;
var orderTotal = parseInt(CleanNumber(productSubtotal)) + parseInt(CleanNumber(radioPrice));
$("#order-total").val(CommaFormatted(orderTotal));
$("#fc-price").attr("value", orderTotal);
}
// DOM READY
$(function() {
var inc = 1;
$(".product-title").each(function() {
$(this).addClass("prod-" + inc).attr("rel", "prod-" + inc);
var prodTitle = $(this).text();
$("#foxycart-order-form").append("<input type='hidden' name='" + prodTitle + "' value='' class='prod-" + inc + "' />");
inc++;
});
// Reset form on page load, optional
$("#order-table input[type=text]:not('#product-subtotal')").val("");
$("#product-subtotal").val("$0");
$("#shipping-subtotal").val("$0");
$("#fc-price").val("$0");
$("#order-total").val("$0");
$("#total-pallets-input").val("0");
// "The Math" is performed pretty much whenever anything happens in the quanity inputs
$('.num-pallets-input').bind("focus blur change keyup", function(){
// Caching the selector for efficiency
var $el = $(this);
// Grab the new quantity the user entered
var numPallets = CleanNumber($el.val());
// Find the pricing
var multiplier = $el
.parent().parent()
.find("td.price-per-pallet span")
.text();
// If the quantity is empty, reset everything back to empty
if ( (numPallets == '') || (numPallets == 0) ) {
$el
.removeClass("warning")
.parent().parent()
.find("td.row-total input")
.val("");
var titleClass = $el.parent().parent().find("td.product-title").attr("rel");
removeName(titleClass);
// If the quantity is valid, calculate the row total
} else if ( (IsNumeric(numPallets)) && (numPallets != '') ) {
var rowTotal = numPallets * multiplier;
$el
.removeClass("warning")
.parent().parent()
.find("td.row-total input")
.val(rowTotal);
var titleClass = $el.parent().parent().find("td.product-title").attr("rel");
applyName(titleClass, numPallets);
// If the quantity is invalid, let the user know with UI change
} else {
$el
.addClass("warning")
.parent().parent()
.find("td.row-total input")
.val("");
var titleClass = $el.parent().parent().find("td.product-title").attr("rel");
removeName(titleClass);
};
// Calcuate the overal totals
calcProdSubTotal();
calcTotalPallets();
calcShippingTotal();
calcOrderTotal();
});
});
我知道我的代码可能有点乱，也许有比我正在进行的所有表格操作更好的方法来完成所有这些（我不是这方面的专家）。
所以，我的问题是：我怎样才能让无线电输入在 Estimate 中输入正确的价格（以及以前数量项目中已经存在的任何价格）而只检查？我确定 order.js 文件必须进行一些修改，我只是不确定是什么。
我希望这一切都有意义。
【问题讨论】：
标签： javascript html input onclick radio