Javascript 如何更改单选输入onclick的值
我有一个简单的要求，但我在任何地方都找不到简单的答案。不过我的问题会很长 我正在尝试创建一个网站的脚本。如你所见，如果你输入你想要的电话类型的数量和你想要的服务器等级，你会在页面底部看到一个总价 我最近也在尝试添加一些输入拨号。该表单有5个无线电输入：Javascript 如何更改单选输入onclick的值,javascript,html,input,onclick,radio,Javascript,Html,Input,Onclick,Radio,我有一个简单的要求，但我在任何地方都找不到简单的答案。不过我的问题会很长 我正在尝试创建一个网站的脚本。如你所见，如果你输入你想要的电话类型的数量和你想要的服务器等级，你会在页面底部看到一个总价 我最近也在尝试添加一些输入拨号。该表单有5个无线电输入： <input class="num-pallets-radio" name="equipment-radio" type="radio" value="$400">SIP</input><br> <inp
<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>
<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>
// 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();
});
});
我希望这一切都有意义。您可以在单选按钮中添加一个更改侦听器，并更新该函数中的值
function changed(element) {
if (this.oldElement != null) this.oldElement.value = "0";
this.oldElement = element;
element.value = "1";
}
如果有人能确认这是否是Chrome中的一个bug，或者我是否理解w3描述错误，那就太好了。非常感谢Stefan的回答。我想这是正确的，我希望你的答案能奏效，但事实证明我的情况更复杂。我将更新我的问题与我所处的全部情况。。。这将是一个漫长的过程@abiahjoshua我不能评论你的问题，所以我会在这里回答。1.你现在到底有什么问题？2.calcTotalPallets函数对我来说似乎很奇怪，因为totalPallets的唯一可能值是0或1，顺便说一句，StackOverflow不喜欢谢谢。。。在问题中，非常感谢您提供关于“谢谢”和“不感谢”的信息。我会尽力解释这个问题。输入无线电的脚本应该根据它们选择的无线电向总体估计价格中添加一个价格。如果收音机的值为0，则在选择收音机时不会添加价格。如果收音机的值为1，则它会将价格添加到总估计价格中。这就是为什么我希望一个脚本可以在点击时更改收音机的值，这几乎可以做到，但即使未选中，价格似乎仍然会添加到总价格中。@abiahjoshua就我所知，该脚本只会在托盘数量上添加1，之后用于运费。此外，您还有一些具有相同类的文本框，这些文本框将增加托盘的数量，如果需要的话，不知道。如果要根据所选收音机添加特定价格，可以将其添加到calcOrderTotal+parseIntCleanNumberradioPrice中的orderTotal中，即var radioPrice=$”。radioclass:选中“.val | | 0；对于单选按钮，您使用的不是value=1，而是price，您可能应该为单选按钮使用另一个类。现在有一个新问题，当你更新手机的数量输入时，数字加起来很好。当您选择收音机时，它不会更新总估算值，直到您将鼠标单击其中一个文本输入，就好像您要更新数量一样。如何在选择后自动更新总估价，而无需点击其他任何内容？我将更新原始问题中的代码。
<input class="num-pallets-input" id="sip-num-pallets" name="equipment_radio" onchange="changed(this)" type="radio" value="0">
<!-- .... -->
function changed() {
$(".num-pallets-input").val("0");
$(".num-pallets-input:checked").val("1");
}