【问题标题】：Updating a label in jQuery by adding the values of textboxes通过添加文本框的值来更新 jQuery 中的标签
【发布时间】：2010-10-06 17:42:10
【问题描述】：

我想知道是否有人可以帮助我编写一个 jQuery 脚本。我正在使用 MVC 2。

我有 2 个文本框。当在文本框中输入值时，这些值的总和应在用户输入时显示在标签控件中。因此，如果页面加载，则文本框为空，因此标签也必须为空（空白）。当用户输入像 10 这样的值时，标签中应该显示 10。如果用户在另一个文本框中键入 5，则应显示 15。如果用户清除了 2 个文本框，则标签应该再次为空白。

我希望有人可以在这里提供帮助:)

谢谢

【问题讨论】：

标签： jquery

【解决方案1】：

$('#textbox1, #textbox2').keyup(function() {

   $('#label').html('');

   var val1 = $('#textbox1').val();
   var val2 = $('#textbox2').val();

   if(!isNaN(val1) && !isNaN(val2)) {

      $('#label').html( parseInt(val1, 10) + parseInt(val2, 10) );

   }
});

更新

为适应您的评论，请参阅以下更改。进行此更改后，我开始倾向于 Reigel 的答案，但也许对 0 的修改结果始终表示为空字符串。

$('#textbox1, #textbox2').keyup(function() {

   $('#label').html('');

   var val1 = $('#textbox1').val();
   var val2 = $('#textbox2').val();

   if(!isNaN(val1) || !isNaN(val2)) {

      $('#label').html( (parseInt(val1, 10) || 0) + (parseInt(val2, 10) || 0) );

   }
});

【讨论】：

谢谢。我是 jQuery 的新手。这段代码是否必须在 $(document).ready(function () {}) 中？
@Brendan Vogt：它通常是附加所有事件处理程序的最佳位置（例如 keyup 在你的情况下），所以是的，我会将它放在 $(document).ready() 函数体中
@Brendan：是的，把它放在那个函数中意味着代码在 DOMReady 事件被触发之前不会执行，这是第一次保证你可以访问所有 DOM 节点这页纸。将访问 DOM 节点的任何内容推迟到 DOMReady 始终是最佳实践。
@David：只有在所有文本框中都有数字时，您的代码才有效。我希望它计算任何文本框中是否有值。假设您只在第一个文本框中输入一个值，而在第二个文本框中什么都不输入，那么结果必须等于第一个文本框中的值。
@David：谢谢。最后一个问题，如果您输入值并将所有文本框设为空白，则标签的值为 0。我希望它为空白，是否有更短的方法来执行此操作，或者我是否需要创建一个总变量，如果它是 0 然后将标签设为空白？

【解决方案2】：

$("#textBox1").keydown(function(event) {
   updateLabel();
});
$("#textBox2").keydown(function(event) {
   updateLabel();
});
function updateLabel()
{
   var val = 0;
   if(isNaN($("#textBox1").val()) && isNaN($("#textBox1").val()))
   {
       $("#myLabel").val("");
       return;
   }
   if(!isNaN($("#textBox1").val()))
       val += $("#textBox1").val();
   if(!isNaN($("#textBox2").val()))
       val += $("#textBox2").val();
   $("#myLabel").val(val); 
}

【讨论】：

【解决方案3】：

$(document).ready(function() {
    $('#num1, #num2').keyup(function(){
        var num1 = parseInt($('#num1').val(),10) || 0;
        var num2 = parseInt($('#num2').val(),10) || 0;
        $('label.sum').text((num1 + num2)|| '')
    });
});

fair demo

【讨论】：

这做了很多假设。任何可以是parseInt:d 的都将是，而任何不能是0。因此'a1' + '1a' 将产生1。这也不能将结果0 区分为错误结果。因此'1' + '-1' 产生''。
哦，原来我提到的第一个假设似乎正是 OP 想要的 :)