Question

我一直在Nan，我的代码中是否有一些缺失的部分？我拥有的值是纯浮点数，如79.00,12.00等。此外，我之前已经编写了这个代码的长版本，我得到了正确的答案但是当我把它改成这个较短的时候，它给了我一个NaN

代码的长版本

function tblcheckboxes(){
    var a, b, c ... v = 0;
    if ($('#tcbx1').is(":checked")) {
         a = parseFloat($("#tcbx1").val(), 10);
    }
    if ($('#tcbx2').is(":checked")) {
         b = parseFloat($("#tcbx2").val(), 10);
    }
    if ($('#tcbx3').is(":checked")) {
         c = parseFloat($("#tcbx3").val(), 10);
    }
    ...
    ...
    ...
    if ($('#tcbx23').is(":checked")) {
         v = parseFloat($("#tcbx23").val(), 10);
    }
    var total = a + b + c ... + v;
    $('.txt7').val(total.toFixed(2)); 
}

$(document).ready(function(){
        $('#tcbx1').click(function(){
                tblcheckboxes();
        });
        $('#tcbx2').click(function(){
                tblcheckboxes();
        });        
        $('#tcbx3').click(function(){
                tblcheckboxes();
        });
        ...
        ...
        ...
        $('#tcbx23').click(function(){
                tblcheckboxes();
        });
});

目前代码

function tblcheckboxes() {
    var a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v = 0;
    var vars = [a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v]; // store in an array for easier access

    var total = 0; // initialize total so it can be added while looping through the elements

    for(var x = 1; x <= 23; x++) {
        if($("#tcbx" + x).is(":checked")) {
            vars[x - 1] = parseFloat($("#tcbx" + x).val(), 10);
        }
        total = parseFloat($(total).val(), 10) + vars[x - 1];
    }

    $(".txt7").val(total.toFixed(2));
}


$(document).ready(function() {
    for(var i = 1; i <= 23; i++) {
        $("#tcbx" + i).click(function() {
            tblcheckboxes();
            grandtotal();
        });
    }
});

$(":checkbox").on("change", function() {
  //change input #grandtotal value according check/uncheck checkboxes
  $(".txt7").val(function() {
    //declare a variable to keep the sum of the values
    var sum = 0;
    //using an iterator find and sum the values of checked checkboxes
    $(":checkbox:checked").each(function() {
      sum = parseFloat($(sum).val(), 10) + parseFloat(~~$(this).val(), 10);
    });
    return sum;
  });
});

//here change the value according on checked checkboxes on DOM ready event
$(".txt7").val(function() {
  var sum = 0;
  $(":checkbox:checked").each(function() {
    sum = parseFloat($(sum).val(), 10) + parseFloat(~~$(this).val(), 10);
  });
  return sum;
});

jsFiddle

Answer 1

var a, b, c, ..., v = 0;

不会初始化所有变量。它将v初始化为0，但所有其他变量都未定义。那需要是：

var a = 0, b = 0, c = 0, ..., v = 0;

或者你可以这样做：

var a, b, c, ..., v;
a = b = c = ... v = 0;

我建议您重新考虑为所有内容使用单独的变量，并使用数组。然后，您可以使用循环遍历所有输入，并将相应的元素设置为0或输入值。

Answer 2

如果您使用的是jQuery，为什么不使用呢？ tblcheckboxes 函数可以是：

var total = 0;

$('input[id^=tcbx]').each(function(cb){total += cb.checked? Number(cb.value) : 0});

console.log(total);

Answer 3

你需要初始化每一个var，因为当你写这个：

var a, b, c ... v = 0;

此时除了v之外的所有变量都为空，并且当您执行此操作时：

if ($('#tcbx1').is(":checked")) {
     a = parseFloat($("#tcbx1").val(), 10);
}

如果$('#tcbx1').is(":checked")为false，则a仍未定义，您无法执行此操作：

var total = a + b + c ... + v;

所以改为：

var a = 0, b = 0, c = 0 ... v = 0;

编辑： parseFloat()不会带两个参数，但仍然有效。考虑改变，另一件事可能$("#tcbx1").val()有数字，但可能是里面的字母。验证值是纯数字，还是至少如果复选框值包含必须位于值末尾的字母：

parseFloat("12.3s", 10) // returns 12.3
parseFloat("s12.3s", 10) // returns Nan
parseFloat("12.3", 10) // returns 12.3
parseFloat("12.3") // returns 12.3

编辑：谢谢你的jsFiddle链接，我看到了：

for(var x = 1; x <= 23; x++) {
    if($("#tcbx" + x).is(":checked")) {
        vars[x - 1] = parseFloat($("#tcbx" + x).val(), 10);
    }
    total = parseFloat($(total).val(), 10) + vars[x - 1];
}

检查代码何时命中：

if($("#tcbx" + x).is(":checked"))

再次vars[x - 1]未定义，但您仍在尝试通过它调用+运算符，它无法正常工作。不确定你想做什么，但简单的方法应该是：

for(var x = 1; x <= 23; x++) {
    if($("#tcbx" + x).is(":checked")) {
        vars[x - 1] = parseFloat($("#tcbx" + x).val(), 10);
        total += vars[x - 1];
    }
}

和......你为什么不看这个：jsFiddle

值是浮点数，但仍然是“NaN”

3 个答案: