我觉得应该是一个简单的请求，但我无法在任何地方找到简单的答案。我的问题虽然很长。
我正在尝试为网站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>
我希望这样当选择无线电输入时，值从“0”变为“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();
});
});
我知道我的代码可能有点乱，并且可能有更好的方法来完成所有这些，而不是我正在进行的所有表格操作（我不是专业人士）。
所以，我的问题是：我如何才能获得无线电输入以在估算中输入正确的价格（以及之前数量项目中已存在的任何价格），而只检查？我确定order.js文件中有一些修改，我只是不确定是什么。
我希望这一切都有道理。
答案 0 :(得分：0)
您可以向单选按钮添加更改侦听器并更新该功能中的值
function changed(element) {
if (this.oldElement != null) this.oldElement.value = "0";
this.oldElement = element;
element.value = "1";
}
并在所有单选按钮上添加onchange =“changed（this）” 将单选按钮的此引用传递给更改后的方法非常重要，以便将现在未选中的单选按钮的值设置为“0”
<input class="num-pallets-input" id="sip-num-pallets" name="equipment_radio" onchange="changed(this)" type="radio" value="0">
<!-- .... -->
或者如果你正在使用JQuery（这会处理所有类型为“num-pallets-input”的无线电）：
function changed() {
$(".num-pallets-input").val("0");
$(".num-pallets-input:checked").val("1");
}
旁注：
据我了解onchange Event，每次检查状态发生变化时都会触发。{
但在Chrome中，只有在您点击单选按钮时才会被解雇
如果有人能够确认这是Chrome中的错误还是我理解w3描述错误，那就太棒了。