所以我正在制作一个订单表格,人们可以在其中选择不同数量的商品,然后使用 JS 计算总数。例如,您可以选择 2 顶棕色帽子(每顶 15 美元),总金额自动变为 30 美元。然后在 POST 页面中,我可以拉出文本框的名称并知道他们订购了 2 顶棕色帽子。
这是我的问题:我想设置一个单选按钮选项,允许他们只选择一个项目,并将其添加到最终总数中,如下所示:
<input type="radio" value="0" name="Syllabus" checked="No" /> Paper ($0)<br />
<input type="radio" value="0" name="Syllabus" checked="No" /> USB ($0)<br />
<input type="radio" value="20" name="Syllabus" checked="No" /> Both ($20)<br />
那么如果选择了“BOTH”,我如何使用 JS 将 20 美元添加到总数中?如果他们选择其他选项之一,那么当然会删除 20 美元。最后,如果他们确实选择了 PAPER 或 USB,我怎么知道他们在最终输出中选择了什么,因为无论哪种方式,值都是 0?
谢谢您的帮助!
------ 如果它对这里的任何人有帮助,是我用来添加其他文本框的值的代码,然后我用零填充总和并四舍五入 ------
// JavaScript Document
function CalculateTotal(frm) {
var order_total = 0
var syllabuscost;
var radios = document.getElementsByTagName('input');
var radiovalue;
for (var z = 0; z < radios.length; z++) {
if (radios[z].type === 'radio' && radios[z].checked) {
// get value, set checked flag or do whatever you need to
radiovalue = radios[z].value;
//Change the syllabus cost depending on the value of the radio button
if (radiovalue == "Paper" || radiovalue == "USB") {
syllabuscost = 0
}
else if (radiovalue == "Both") {
syllabuscost = 20
}
}
}
// Run through all the form fields
for (var i=0; i < frm.elements.length; ++i) {
// Get the current field
form_field = frm.elements[i]
// Get the field's name
form_name = form_field.name
// Is it a "product" field?
if (form_name.substring(0,4) == "PROD") {
// If so, extract the price from the name
item_price = parseFloat(form_name.substring(form_name.lastIndexOf("_") + 1))
// Get the quantity
item_quantity = parseInt(form_field.value)
// Update the order total
if (item_quantity >= 0) {
order_total += (item_quantity * item_price)
}
}
}
// Display the total rounded to two decimal places Also added the syllabuscost to the total price!
frm.TOTAL.value = round_decimals(order_total+syllabuscost, 2)
}
}
function round_decimals(original_number, decimals) {
var result1 = original_number * Math.pow(10, decimals)
var result2 = Math.round(result1)
var result3 = result2 / Math.pow(10, decimals)
return pad_with_zeros(result3, decimals)
}
function pad_with_zeros(rounded_value, decimal_places) {
// Convert the number to a string
var value_string = rounded_value.toString()
// Locate the decimal point
var decimal_location = value_string.indexOf(".")
// Is there a decimal point?
if (decimal_location == -1) {
// If no, then all decimal places will be padded with 0s
decimal_part_length = 0
// If decimal_places is greater than zero, tack on a decimal point
value_string += decimal_places > 0 ? "." : ""
}
else {
// If yes, then only the extra decimal places will be padded with 0s
decimal_part_length = value_string.length - decimal_location - 1
}
// Calculate the number of decimal places that need to be padded with 0s
var pad_total = decimal_places - decimal_part_length
if (pad_total > 0) {
// Pad the string with 0s
for (var counter = 1; counter <= pad_total; counter++)
value_string += "0"
}
return value_string
}
和 HTML
<form>
<tr>
<th><label for="PROD_BrownShoe_175">Brown Shoe</label></th>
<td><input type="text" name="PROD_BrownShoe_175" onchange="CalculateTotal(this.form)" /> ($175) - Each</td>
</tr>
<tr>
<th><label for="PROD_BlackShoe_255">Black Shoe</label></th>
<td><input type="text" name="PROD_BlackShoe_255" onchange="CalculateTotal(this.form)" /> ($255) - Each</td>
</tr>
<tr>
<th><label for="PROD_BlueShoe_325">Blue Shoe</label></th>
<td><input type="text" name="PROD_BlueShoe_325" onchange="CalculateTotal(this.form)" /> ($325) - Each</td>
</tr>
<tr>
<th>Total $:</th>
<td><input type="text" name="TOTAL" onFocus="this.form.elements[0].focus()" /></td>
</tr>
</form>