从输入在一起的jQuery

Question

添加值我有以下表格：

<table> 
    <thead> 
     <tr> 
      <th></th> 
      <th>Female</th> 
      <th>Male</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Rising 1</td> 
      <td> 
       <input id="firstinput" /> 
      </td> 
      <td> 
       <input id="secondinput" /> 
      </td> 
     </tr> 
     <tr> 
      <td>Rising 2</td> 
      <td> 
       <input id="thirdinput" /> 
      </td> 
      <td> 
       <input id="fourthinput" /> 
      </td> 
     </tr> 
     <tr> 
      <td>2+</td> 
      <td> 
       <input id="fifthinput" /> 
      </td> 
      <td> 
       <input id="sixthinput" /> 
      </td> 
     </tr> 
    </tbody> 
</table> 

我想在这些输入添加所有值加在一起，并显示他们的价值：

$(document).ready(function() { 

     $('#mybutton').click(function() { 

      alert(parseInt($('#firstinput').val()) + 
       parseInt($('#secondinput').val()) + 
       parseInt($('#thirdinput).val()) + 
       parseInt($('#fourthinput').val()) + 
       parseInt($('#fifthinput).val()) + 
       parseInt($('#sixthinput').val())); 
     }); 
}); 

嗯，这只有当表中存在所有值时才有效。如果有人是空的，最终会得到NaN。

你如何解决这个问题？

我也接近这完全错了吗？有没有更好的方法来实现这一目标？

Answer 1

你可以简单地把它变成一个或条款：

var total = 0; 

$('input').each(function() { 
    total += (+$(this).val() || 0); 
}); 

alert(total); 

---

记住：+$(this).val()是一个捷径parseInt($(this).val())。虽然这很方便，但它有与parseInt相同的问题;即如果字符串以0开头，则将其解析为基地8：parseInt（“033”）; // 27 +“033”; // 27要绝对确定不会发生，请使用parseInt，并以10为底：parseInt（“033”，10）; // 33所以，在我们的上下文中，你会使用这个：total + =（parseInt（$（this）.val（），10）|| 0）;

Answer 2

NaN是错误的，因此如果第一个值为false，您可以使用或运算符（||）返回第二个值。

$(document).ready(function() { 

     $('#mybutton').click(function() { 

      alert(parseInt($('#firstinput').val()) || 0 + 
       parseInt($('#secondinput').val()) || 0 + 
       parseInt($('#thirdinput').val()) || 0 + 
       parseInt($('#fourthinput').val()) || 0 + 
       parseInt($('#fifthinput').val()) || 0 + 
       parseInt($('#sixthinput').val()) || 0); 
     }); 
}); 

Answer 3

在你的代码中，parseInt($('#sixthinput').val())的改变parseInt($('#sixthinput').val() || 0)。这样，如果它为空则返回0，如果输入无效则返回NaN。

Answer 4

试试这个：

$('#mybutton').click(function() { 
    var sum = 0; 
    $('input').each(function(){ 
     var val = parseInt(this.value, 10) 
     if (isNaN(val)) { val = 0 } 
     sum += val 
    }) 
}); 

DEMO

Answer 5

$("#mybutton").click(function(){ 
alert(addValues($("input"))); 
}); 

function addValues(selector){ 
    var total = 0; 
    selector.each(function(){ 
     var thisVal = parseInt($(this).val()); 
     if(!isNaN(thisVal)) total += thisVal; 
    }); 
    return total; 
} 

请使用isNaN（）来可靠检查，如果值不是数字。

上面为了简单起见，我已将它添加到函数中。

Answer 6

$('#myButton').click(function() { 
    var sum = 0; 
    $('table input').each(function(){ 
     val = parseInt($(this).val(),10); 
     sum += isNaN(val) ? 0 : val; 
    } 
    alert(sum); 
} 

务必使08和09解析正确包括10基数在调用parseInt。

Answer 7

PLZ试试这个Workingdemohttp://jsfiddle.net/SmRXL/4/或http://jsfiddle.net/SmRXL/3/

你可以使用类和迭代，并总结了这一切。

休息演示将帮助，`:)

代码

$(function() { 
    $('#foo').click(function() { 
     var total = 0; 
     $('.hulk').each(function() { 
      if ($(this).val() > 0) total += parseInt($(this).val()); 
     }); 
     alert(" TOTAL is => " + total); 
    }); 
}); 

HTML

<table> 
    <thead> 
     <tr> 
      <th></th> 
      <th>Female</th> 
      <th>Male</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Rising 1</td> 
      <td> 
       <input class="hulk" id="firstinput" /> 
      </td> 
      <td> 
       <input class="hulk" id="secondinput" /> 
      </td> 
     </tr> 
     <tr> 
      <td>Rising 2</td> 
      <td> 
       <input class="hulk" id="thirdinput" /> 
      </td> 
      <td> 
       <input class="hulk" id="fourthinput" /> 
      </td> 
     </tr> 
     <tr> 
      <td>2+</td> 
      <td> 
       <input class="hulk" id="fifthinput" /> 
      </td> 
      <td> 
       <input class="hulk" id="sixthinput" /> 
      </td> 
     </tr> 
    </tbody> 
</table> 

<input type="button" id="foo" value="TOTAL ME" />