jquery價值變化生活

Question

請參閱此HTML。

<input type="text" name="amount1" value="10" /> 
<input type="text" name="amount2" value="5" /> 
<input type="text" name="total" value="" disabled="disabled" /> 

請參閱此代碼。 我確切想要的。 當I型在amount1文本框中一些值（INT）， 自動value顯示在共箱，

當我把一些值AMOUNT2， 總應該顯示（amount1 + AMOUNT2）=值

我試圖與這個jQuery，但並沒有解決我的問題

$(document).ready(function() { 
    $('#amount1').keyup(function() { 
    $('#total').html('<input type="text" name="total" style="width: 49%;" value="' + $(this).val() + '"/>'); 
    }); 
}); 

有人能幫助我。 太棒了！

Answer 1

爲什麼要將輸入添加爲HTML？只需使用$（'＃total'）。val（[你想要的值]）;

使用此代碼：

$(document).on('keyup', '#amount1, #amount2', function() { 
    var sumAll = parseInt($('#amount1').val()) + parseInt($('#amount2').val()); 
    $('#total').val(sumAll); 
}); 

而且不要忘了添加ID輸入內容是這樣的：

<input type="text" id="amount1" name="amount1" value="10" /> 
<input type="text" id="amount2" name="amount2" value="5" /> 
<input type="text" id="total" name="total" value="" disabled="disabled" /> 

這是更好地利用parsInt（）函數來肯定整數類型。

你可以看到小提琴：http://jsfiddle.net/QMaster/8gthskvb/

Answer 2

DEMO 它需要添加class的輸入，所以你可以根據需要添加儘可能多的輸入和names避免列表，如果你不與需要它一個簡單的編輯，你可以把它與您的HTML

HTML：

<input type="text" class='amount' name="amount1" value="10" /> 
<input type="text" class='amount' name="amount2" value="5" /> 
<input type="text" name="total" value="" disabled='disabled' /> 

JS ：

var total = 0; 
$(document).ready(function() { 
    //Calculate the first total once the page is loaded 
    $('input.amount').each(function() { 
     total += parseInt($(this).val()); 
    }); 
    $('input[name="total"]').val(total); 

    //Each time the input value change(right click, keyboard, any) recalculate the total 
    $('input.amount').on('input', function() { 
     total = 0; 
     $('input.amount').each(function() { 
      var amountInfo = parseInt($(this).val()); 
      amountInfo = (amountInfo) ? amountInfo : 0; //Check if number otherwise set to 0 
      total += amountInfo; 
     }); 
     $('input[name="total"]').val(total); 
    }); 
}); 

Answer 3

你在你的HTML中缺少id，你輸入值的方式有點奇怪。試試這個：

HTML

<input type="text" id="amount1" name="amount1" value="10" /> 
<input type="text" id="amount2" name="amount2" value="5" /> 
<input type="text" id="total" name="total" value="" disabled="disabled" /> 

的Javascript

$(document).ready(function() { 
$('#amount1,#amount2').keyup(function() { 
    var total = parseInt($('#amount1').val()) + parseInt($('#amount2').val()); 
$('#total').val(total); 
}); 

}）;

和提琴此

jsFiddle

注意，你需要轉換你的（文本）值整數，以獲得正確的計算。這就是爲什麼我使用parseInt()。如果您需要輸入浮點數，則需要使用parseFloat()方法替換此投射。您可能還需要檢查，如果輸入的數值確實是一個數字，它可以以不同的方式來完成，其中之一是在isNaN()方法（isNotaNumber =>返回true，如果該值不是數字）

Answer 4

$(document).ready(function() { 
    $('#amount1').keyup(function() { 
     $('#total').val(parseInt($(this).val(), 10) + parseInt($('#amount2').val(), 10)); 
    }); 
    $('#amount2').keyup(function() { 
     $('#total').val(parseInt($(this).val(), 10) + parseInt($('#amount1').val(), 10)); 
    }); 
}); 

Answer 5

<table> 
    <tr> 
     <td width="40px">1</td> 
     <td>Number</td> 
     <td><input class="txt" type="text" name="txt1" /></td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>Number</td> 
     <td><input class="txt" type="text" name="txt2" /></td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>Number</td> 
     <td><input class="txt" type="text" name="txt3" /></td> 
    </tr> 
    <tr id="summation"> 
     <td colspan ="2" align="right"> 
      Sum : 
     </td> 
     <td> 
      <input type="text" id='sum1' name="input" /> 
     </td> 
     </span> 
     </td> 
    </tr> 
</table> 

JQuery的一部分，

$(document).ready(function() { 
     //this calculates values automatically 
     calculateSum(); 

     $(".txt").on("keydown keyup", function() { 
      calculateSum(); 
     }); 
    }); 

    function calculateSum() { 
     var sum = 0; 
     //iterate through each textboxes and add the values 
     $(".txt").each(function() { 
      //add only if the value is number 
      if (!isNaN(this.value) && this.value.length != 0) { 
       sum += parseFloat(this.value); 
       $(this).css("background-color", "#FEFFB0"); 
      } 
      else if (this.value.length != 0){ 
       $(this).css("background-color", "red"); 
      } 
     }); 

     $("input#sum1").val(sum.toFixed(2)); 
    } 

小提琴：here

Answer 6

<input type="text" id="amount1" name="amount1" value="10" /> 
<input type="text" id="amount2" name="amount2" value="5" /> 
<input type="text" id="total" name="total" value="" disabled="disabled" /> 

    $(document).ready(function() { 
    $('#amount1').keyup(function() { 
    $('#total').val(parseInt($('#amount1').val())+parseInt($('#amount2').val()));  

    }); 
}); 

這裏是你的解決方案，因爲你沒有使用id標籤，因爲jquery與你沒有定義的IDz和CLasses一起工作。所以我已經重新創建了你的解決方案，希望它的簡單，你可以理解它。

問候 伊姆蘭卡西姆 完善的網絡解決方案

Working Link