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

Question

我使用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>

接下来的部分是我被卡住的地方。因为他们也想要一个租赁价格，所以我想我应该检查一下相关的复选框何时被选中，并为每个复选框填充另一个变量，然后将它们相加。但由于某些原因，只有当我选中任何一个复选框而不是多个复选框时，它才能起作用，如果我有多个复选框，它会在租赁总额中给出NaN。

javascript的底部只是将总数相加，然后将其限制为两位小数。

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

Answer 1

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

("12.34“+ "56.78") *9 === "12.3456.78”*9 "==“NaN *9 "==”NaN。

下次，先学习编程语言，然后再学习“框架”。jQuery是，而不是语言；你不能用jQuery编程。没有"javascript"：MDN: JavaScript

Answer 2

正如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