Question

我有四个带有ID的texbox #a #b #c #d。假设用户输入上述任意三个框的值，则剩余的文本框将显示之前在三个框中输入的值的总和。

例如：如果用户输入#a #c＆amp;的值#D 剩下的文本框，即#b将显示#a #b＆amp;的总和。 #C

我们如何在Javascript或jquery中实现它？我正在使用onkeyup（）函数，但我无法解决它。

Code Tried：

<input type="Number" id="a" onkeyup="check();" />
<input type="Number" id="b" onkeyup="check();"/>
<input type="Number" id="c" onkeyup="check();"/>
<input type="Number" id="d" onkeyup="check();"/>
    <script>
var a=Number($('#a').val());
var b=Number($('#b').val());
var c=Number($('#c').val());
var d=Number($('#d').val());
    Function check(){
    if (a!=null && b!=null && c!=null)
    {
        var sum1=a+b+c;
        Number($('#d').val(sum1));
    }
    else if (a!=null && b!=null && d!=null)
    {
        var sum2=a+b+d;
        Number($('#c').val(sum2));
    }
    else if (a!=null && c!=null && d!=null)
    {
        var sum3=a+c+d;
        Number($('#b').val(sum3));
    }
    else if (b!=null && c!=null && d!=null)
    {
        var sum4=b+c+d;
        Number($('#a').val(sum4));
    }
    }
    </script>

Answer 1

也许是这样的？如果你正在使用jQuery：

$("#b").keyup(function(){

    // Add a + b to total
    var a = parseInt($("#a").val());
    var b = parseInt($("#b").val());

    $("#total").text(a+b);
});

$("#c").keyup(function(){

    // Add a + b to total
    var a = parseInt($("#a").val());
    var b = parseInt($("#b").val());
    var c = parseInt($("#c").val());

    $("#d").val(a+b);
});

编辑：这只是一个快速草案，可以给你一个想法，不确定它是否会立即生效。

Answer 2

HTML：

<input type="Number" id="a"  >
<input type="Number" id="b" >
<input type="Number" id="c">
<input type="Number" id="d" >

JS：

    $(document).ready(function() {
   $( 'input').keyup(function() {
           var a=Number($('#a').val());
var b=Number($('#b').val());
var c=Number($('#c').val());
var d=Number($('#d').val());


    if (a!=null && b!=null && c!=null)
    {
        var sum1=a+b+c;
        $('#d').val(sum1);
    }
    else if (a!=null && b!=null && d!=null)
    {
        var sum2=a+b+d;
        $('#c').val(sum2);
    }
    else if (a!=null && c!=null && d!=null)
    {
        var sum3=a+c+d;
        $('#b').val(sum3);
    }
    else if (b!=null && c!=null && d!=null)
    {
        var sum4=b+c+d;
      $('#a').val(sum4);
    }
    });
   });

小提琴：http://jsfiddle.net/1c4pvamm/6/

Answer 3

在代码中进行以下更改。

检查F中的大写Function check()。它必须是小写f（即）function check()。
像这样检查null条件。 if (a && b && c)
使用单独的方法获取更新的a，b，c和d值，并使用check方法调用该方法。

代码段：

＆＃13;

var a, b, c, d;

function values() {
  a = Number($('#a').val());
  b = Number($('#b').val());
  c = Number($('#c').val());
  d = Number($('#d').val());
}

function check() {
  values();
  if (a && b && c) {
    var sum1 = a + b + c;
    $('#d').val(sum1);
  } else if (a && b && d) {
    var sum2 = a + b + d;
    $('#c').val(sum2);
  } else if (a && c && d) {
    var sum3 = a + c + d;
    $('#b').val(sum3);
  } else if (b && c && d) {
    var sum4 = b + c + d;
    $('#a').val(sum4);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="Number" id="a" onkeyup="check();" />
<input type="Number" id="b" onkeyup="check();" />
<input type="Number" id="c" onkeyup="check();" />
<input type="Number" id="d" onkeyup="check();" />

＆＃13;

Answer 4

接受挑战！

VanillaJS的解决方案。使用不同数量的盒子。

4个盒子

// Example with 4 boxes

http://jsfiddle.net/wpLdmxeh/2/

5盒

// Example with 5 boxes

http://jsfiddle.net/wpLdmxeh/3/

Javascript文本框更新简单添加

4 个答案: