Javascript 选中复选框后填充变量，然后将它们添加到一起-获取NaN

我正在使用jquery.calculation在页面上添加元素。 我的javascript的第一部分将这些添加到255产品中

这是到目前为止我的javascript：

$(document).ready(function(){

$(".calcTotal").click(
function (){
    // get the sum of the elements
    var studio255_photocopier = $("#studio255_photocopier").sum();
    var sum_checkbox255 = $(".checkbox_sum255:checked").sum();
    var qty255 = $(".qty255").sum();
    var single_total255 = ((studio255_photocopier + sum_checkbox255) * qty255);

    if ($('.sorting_stapling255').is(':checked'))
    {
      var lease_sorting_stapling255 = "25.88";
    };

    if ($('.wake_up_fax255').is(':checked'))
    {
      var lease_wake_up_fax255 = "29.41";
    };

    if ($('.extra_2500_tray255').is(':checked'))
    {
      var lease_extra_2500_tray255 = "24.35";
    };

    var lease_single_total255 = ((lease_extra_2500_tray255 + lease_wake_up_fax255 + extra_2500_tray255) * qty255);

    // Grand total sum
    var grand_total = (single_total255);
    var lease_total = (lease_single_total255);
    // update the total
    $("#grand_total").text("£" + grand_total.toFixed(2));
    $("#lease_total").text("£" + lease_total.toFixed(2));
    }
);

});

这也是我正在使用的hmtl：

<div class="details options">
                    <h1>Addtional Options functionality</h1><span>choose your upgrades here:</span>
                    <div class="clear"></div>
                    <form id="studio255">
                    <input class="sum255" type="hidden" id="studio255_photocopier" value="1538.24" />
                    <label><input class="checkbox_sum255 sorting_stapling255" type="checkbox" id="studio255_sorting_stapling" name="sorting_stapling255" value="278.3" />
                    Sorter/Stapler</label>
                    <label><input class="checkbox_sum255 wake_up_fax255" type="checkbox" id="studio255_wake_up_fax" name="studio255_wake_up_fax" value="316.25" />
                    Walk Up Fax Kit</label>
                    <label><input class="checkbox_sum255 extra_2500_tray255" type="checkbox" id="studio255_extra_2500_tray" name="studio255_extra_2500_tray" value="261.86" />
                    Extra 2500 large capacity paper tray</label>
                    <div class="clear"></div>
                </div> <!-- details -->

                <div class="details amount">
                    <p>Specify the number of machines you require, the total price will be calculated automatically (displayed at the bottom of this page):</p>
                    <label>Price
                    <input type="number" id="photocopierTotal_255" class="price" name="studio255_price" /></label>
                    <label>Qty
                    <input class="qty255" type="number" id="studio255_quantity" name="studio255_quantity" /></label>
                    <input id="btnClear" type="reset" value="clear" />
                    <input class="calcTotal" type="button" value="calculate" />
                    </form>
                    <div class="clear"></div>
                </div> <!-- details -->

<p>Your total cost is&nbsp;&nbsp;&nbsp;<span id="grand_total"></span><br />
        Your total lease cost is&nbsp;&nbsp;&nbsp;<span id="lease_total"></span></p>

附加选项功能在此处选择您的升级：
分拣机/订书机
无障碍传真套件
额外2500个大容量纸盘
指定所需的机器数量，将自动计算总价（显示在此页面底部）：

价格
数量
您的总成本是

您的总租赁成本为

下一点就是我被卡住的地方。 因为他们也想要一个租赁价格，我想我只需要在相关复选框被选中时进行检查，然后为每个复选框填充另一个变量，然后将它们相加。 但出于某种原因，它只在我有任何一个复选框而不是多个复选框的情况下起作用，如果我有多个复选框，它会在租赁总额中给我NaN

javascript的底部只是将总数加起来，然后限制在小数点后2位

我确信我的javascript有点粗糙，可能我做了一些明显错误的事情。

您正在“添加”您先前分配的字符串：

（“12.34”+“56.78”）*9==“12.3456.78”*9==“南*9”==“南”

---

下次，在“框架”之前学习编程语言。jQuery不是一种语言；您不需要在jQuery中编程。没有“javascript”：

正如PointedEars所指出的，您在这里添加字符串。

+

运算符同时处理字符串和数字。如果方程的任一侧是字符串，则这两个部分是串联的，如果两个部分都是数字，则只有它们被添加

var str  = "3.3";
var num1 = 1.1;
var num2 = 1.2;

str + str;   // String: "3.33.3"
str + num1;  // String: "3.31.1"
num1 + num2; // Number: 2.3

然后，当您将字符串相乘时，结果被强制为一个数字，然而，在您的例子中，因为您的字符串类似于“3.33.3”，这是一个无效的数字，因此结果为NaN

"3.33.3" * 2 // NaN

答案是首先要确保你在处理数字。将定义数字字符串的所有位置更改为实际数字：

var lease_sorting_stapling255 = 25.88;

或者，如果值来自您的表单，您可能需要将它们解析为一个数字。为此，您可以使用

parseInt

或

parseFloat

，具体取决于是否需要小数位数

parseFloat("25.88");  // 25.88
parseInt("25.88", 10);  // 25

parseInt的第二个参数非常重要，因为它定义了数字的基数。没有它，数字可以解析为八进制或十六进制

parseInt("007");  // 7
parseInt("008");  // 8
parseInt("009");  // 9
parseInt("010");  // 8 !!
parseInt("010", 10); // 10

---

感谢您对字符串的解释。这是我应该知道的基本知识。非常感谢你给我如此深刻的回答。我试着快速完成，而不是去想字符串和数字。我现在只把变量作为数字，很好，很简单。@nickf

（“33”*2）==66！==NaN

，因为

“33”

由

*

运算符转换为数值（所有操作数都转换为数值，不像Python中的重复）。这里的问题是串联字符串中有两个点，必须将其转换为数值

NaN

。