Question

我在表单中有以下3个输入字段：

<input id="a" name="a" type="text" />
<input id="b" name="b" type="text" />
<input id="c" name="c" type="text" />

以及以下段落：

<p id="grand_total"></p>

我想将三个文本输入相乘，并在grand_total中填入结果。

我只希望在我们用0到1000之间的整数填充所有三个文本输入时显示结果。

此外，如果任何文本字段值更改为另一个有效整数，那么我希望重新计算grand_total。非常感谢任何帮助，谢谢。

Answer 1

@brendan让我走向正确的方向，谢谢。以下代码有效：

$(document).ready(function () {

  $('#a, #b, #c').change(function () {
    var a = parseInt( $("#a").val(), 10 );
    var b = parseInt( $("#b").val(), 10 );
    var c = parseInt( $("#c").val(), 10 );
    a = isNaN(a) ? 0 : a;
    b = isNaN(b) ? 0 : b;
    c = isNaN(b) ? 0 : c;
    ( a > 0 && a < 1000 && b > 0 && b < 1000 && c > 0 && c < 1000 ) ? $('#grand_total').html( a * b * c ) : $('#grand_total').html(0);
  });

});

Answer 2

试试这个：

if($("#a").val().length && $("#b").val().length && $("#c").val().length)
{
    $("#grand_total").html((parseInt($("#a").val()) + parseInt($("#b").val()) + parseInt($("#c").val())));
}

这样做是检查所有输入是否都有值。如果它们都包含某些内容，则内部语句将所有值解析为int并将输出插入grand_total

如果您想要解析为float而不是int，只需将parseInt()替换为parseFloat()

干杯，

詹姆斯

Answer 3

此代码将确保每个值都是一个数字，如果不是，则该值默认为0：

$("#a").change(Calc());
$("#b").change(Calc());
$("#c").change(Calc());    

function Calc() {
var vals = [];
vals.push($("#a").val());
vals.push($("#b").val());
vals.push($("#c").val());

var a = isNaN(parseInt(vals[0])) ? 0 : parseInt(vals[0]);
var b = isNaN(parseInt(vals[1])) ? 0 : parseInt(vals[1]);
var c = isNaN(vals[2]) ? 0 : parseInt(vals[3]);

if(a>-1 && a<1001 && b>-1 && b<1001 && c>-1 && c<1001)
  $("#grand_total").html(a * b * c);
}

Answer 4

function calcSum(inputs) {
  var sum = 0;
  var error = false;

  inputs.each(function () {
    var value = +$(this).val() || 0;
    if (value < 0 || value > 1000) {
      error = true;
      return false; //Stops "each" loop
    }
    sum += value;
  });

  if (error) {
    ("#grand_total").text("Invalid number(s)");
  } else {
    $("#grand_total").text(sum);
  }
}

$("#a,#b,#c").change(function() { calcSum($("#a,#b,#c")); });

Answer 5

优化版本：

var a = parseInt($('#a').val(), 10) || 0,
    b = parseInt($('#b').val(), 10) || 0,
    c = parseInt($('#c').val(), 10) || 0;
    $('#grand_total').html(a+b+c);

请确保在10中使用parseInt()作为参数，以避免令人不快的意外;）

Answer 6

var $inputs = $("#a, #b, #c");
var $result = $("#grand_total");

$inputs.change(function() {    
    var sum = 0;
    var valid = true;

    $inputs.each(function() {
        var n = parseInt($(this).val(), 10);

        if ( isNaN(n) || n < 0 || n > 1000 ) { 
            return valid = false;
        } else {
            sum *= n;
        }
    });

    valid ? $result.text(sum).show() : $result.hide();
});

jQuery - 执行计算

6 个答案: