平衡jQuery中的两个输入数字字段

Question

I would like to balance two input number fields using jquery based on the max value set for both. for example its like a balance, if one side goes down the other goes up and vice versa. another example if the max value is 20 then if i enter 5 in input field one then 15 would be left in input field two. Need the help Thanks. Haven't started coding it as yet stuck trying to figure it out.

Answer 1

here's a fiddle to get you started (and maybe finished):

https://jsfiddle.net/ahmadabdul3/xwyrrw53/1/

html:

<input type='number' id='first' class='balancable'/>
<input type='number' id='second' class='balancable'/>

js:

$(function() {
    var max = 20;
    var balanceOpposite = {
      'first': 'second',
      'second': 'first',
    }
    $('.balancable').on('input', function() {
      var id = $(this).attr('id');
      var thisVal = $(this).val();
      $('#' + balanceOpposite[id]).val(20 - thisVal);
    });
});

Answer 2

First you need to attach the input eventhandler on all of the relevant input fields. This event handler will compare the current input value of a input fields to the total/max value variable and find the remainder accordingly. The event handler then finds the other input fields and assigns them with the appropriate remainder values.

Note : This allows you to add as many inputs as you want and it will balance them all out. Just remember to add the balance class on the input field.

 var total = 20; $('.balance').on('input', function() { var value = parseInt(this.value); if (isNaN(value)) { this.value = value = 0; } else if (value > total) { this.value = value = total; }/* else if (value < 0) { this.value = value = 0; } * Remove this comment if value shouldn't be negative. */ var remainder = total - value; var otherInputs = $('.balance'); otherInputs.splice($.inArray(this,otherInputs),1); var remainderDiv = remainder/otherInputs.length; $.each(otherInputs, function(input) { otherInputs[input].value = remainderDiv; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="number" class="balance"> <input type="number" class="balance"> 

Update : The two inputs can be less than the max but never higher.

 var max = 20; $('.balance').on('input', function() { var value = parseInt(this.value); if (isNaN(value)) { value = 0; } var otherInputs = $('.balance'); var sum = 0; $.each(otherInputs, function(input) { sum += parseInt(otherInputs[input].value); }); if (sum > max) this.value = max - (sum - value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="number" class="balance"> <input type="number" class="balance">