javascript - 编辑脚本以包含订单总计复选框

Question

我有这个脚本:

//CODE BELOW THIS POINT IS NOT MINE//

/* This script is Copyright (c) Paul McFedries and 
Logophilia Limited (http://www.mcfedries.com/).
Permission is granted to use this script as long as 
this Copyright notice remains in place.*/

function CalculateTotal(frm) {
var order_total = 0

// 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

    //My attempt at updating order total for checkbox
           if(document.checkbox.select[i].checked)  
        {
            order_total = item_price

       }

        }
    }
}

// Display the total rounded to two decimal places
frm.TOTAL.value = round_decimals(order_total, 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
}
//CODE ABOVE THIS POINT IS NOT MINE//

然后您定义商品的价格及其 ID:

    <input type="text" name="PROD_CH_35.00" onChange="CalculateTotal(this.form)">

这是复选框功能代码:

function totalcheckbox() {
document.checkbox.TOTAL.value = ''; //I set the value of all the checkboxes equal to nothing
var total = 0;
//For loop iterates through all the checkboxes. ++ adds one each time to i.
for (i=0;i<document.checkbox.select.length;i++) {
      if (document.checkbox.select[i].checked) {
        total = total + parseInt(document.checkbox.select[i].value); //take whatever they selected and make it into an integer
      }
    }
document.checkbox.TOTAL.value = total; //total value box equal to the sum
}

我的复选框是这样的:

    <input type="checkbox" name="select" value="15" onchange="totalcheckbox()">

我遇到的问题是其中两个字段是复选框。我想要它，所以当我选择这些复选框时，它会添加到订单总数中。当我取消选择复选框时，它将减去复选框的价格。

例如，我可以有一个像这样的复选框:

    <input type="checkbox" name="PROD_CH_15.00" value="15" onchange="totalcheckbox()">

复选框的功能本身可以添加总计，订单总计功能也可以工作。最大的问题是编辑订单总计脚本，以便复选框将更改总价，就像您在文本框中输入数量一样，它会更新总计。

这是工作复选框代码的 JS Fiddle:http://jsfiddle.net/7uzr4/

这是订单总代码的 JS Fiddle:http://jsfiddle.net/X2wMR/

如何组合这两个代码，以便复选框代码也添加到订单总计中？

Answer 1

您必须根据字段类型设置item_quantity。您当前的 CalculateFunction 只需稍作更改即可工作:

// Get the quantity
if(form_field.type == 'checkbox') {
    // Will be 0 for unchecked, 1 for checked
    item_quantity = form_field.checked;
} else {
    item_quantity = parseInt(form_field.value, 10);           
}

然后只需从复选框的 onchange 调用相同的函数即可:

<input type="checkbox" name="PROD_CH_15.00" value="15" onchange="CalculateTotal(this.form)">

Working version on jsfiddle