Question

所以我正在处理订单，人们可以选择不同数量的商品，然后使用JS计算总数。例如，您可以选择2个棕色帽子（每个15美元），TOTAL自动变成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>

Answer 1

您可以将美元值存储在对象中。

var costs = {
    "paper" : 0,
    "usb"   : 0,
    "both"  : 0
};

单选按钮的值可以（也应该）是唯一的。

<input type="radio" value="paper" name="Syllabus" checked="No" /> Paper ($0)<br />

<input type="radio" value="usb" name="Syllabus" checked="No" /> USB ($0)<br />

<input type="radio" value="both" name="Syllabus" checked="No" /> Both ($20)<br />

然后，在您的CalculateTotal函数中，引用costs["paper"]等

Answer 2

值应该是产品名称，而不仅仅是价格，原因如下。

作为一种解决方案，您可以在由分隔符分隔的值字段中包含名称和价格，这样可以为您提供足够的信息：

<input type="radio" value="paper|0" name="Syllabus" checked="No" /> Paper ($0)<br />
<input type="radio" value="usb|0" name="Syllabus" checked="No" /> USB ($0)<br />
<input type="radio" value="both|20" name="Syllabus" checked="No" /> Both ($20)<br />

访问脚本中的值：

item_quantity = parseInt(form_field.value.split('|')[1])

Answer 3

好吧，实际上我走了另一条路并解决了问题。我已经设置好它只是通过页面上的所有单选按钮，然后添加了一个片段，根据它是否找到值“paper”，“usb”或“both”来改变教学大纲的成本。 / p>

如果我需要添加更多具有相同功能类型的单选按钮，这可以让我扩展整个过程。

可能有一种更清洁，更有效的方法来做到这一点，但这是我能想到的最好的方法。我得到的回答有点帮助，但并没有真正帮助解决问题。希望这有助于其他人。

如何将单选按钮值一起添加，如果它们具有相同的值，则区分它们？

3 个答案: