如何获得添加多个文本框'使用jQuery在另一个单独的文本框中显示s值

How to get Addition of multiple textbox's values in another single textbox using jQuery?

本文关键字：文本 单独 另一个 显示 jQuery 添加 何获得 使用      更新时间：2023-11-16

jquery中的新手，需要一些关于此描述的帮助。

假设，我有1个文本框，其中包含另外2个文本框的相加结果。

<input type="text class="tb1">
<input type="text class="tb2">
<input type="text class="result" id="result1">

像这样。

假设我有5个文本框，其中包含各自的2个文本框的添加结果。每个Result文本框使用jquery脚本自动生成结果。因此，我有5个结果文本框，它们分别具有相加结果。

现在，当我使用jquery或javascript脚本自动点击复选框时，我想在另一个文本框中再次将所有5个结果texbox中的值相加。

我怎样才能完成这项任务？参考图片了解问题。https://i.stack.imgur.com/iFF46.jpg

假设文本框的数字5保持不变，这就是解决问题的方法。（无验证）

$("#add").click(function() {
  $("#result1").val(parseInt($("#box1").val()) + parseInt($("#box2").val()));
  $("#result2").val(parseInt($("#box3").val()) + parseInt($("#box4").val()));
  $("#result3").val(parseInt($("#box5").val()) + parseInt($("#box6").val()));
  $("#result4").val(parseInt($("#box7").val()) + parseInt($("#box8").val()));
  $("#result5").val(parseInt($("#box9").val()) + parseInt($("#box10").val()));
  
});
$( "#final-check" ).change(function() {
  var finalResult = 0;
    for (var i = 1; i <= 5; i++) {
      finalResult = finalResult + parseInt($("#result" + i).val());
    }
  $("#final-result").val(finalResult);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="text" id="box1">
    </td>
    <td>+</td>
    <td>
      <input type="text" id="box2">
    </td>
    <td>=</td>
    <td>
      <input type="text" id="result1">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" id="box3">
    </td>
    <td>+</td>
    <td>
      <input type="text" id="box4">
    </td>
    <td>=</td>
    <td>
      <input type="text" id="result2">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" id="box5">
    </td>
    <td>+</td>
    <td>
      <input type="text" id="box6">
    </td>
    <td>=</td>
    <td>
      <input type="text" id="result3">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" id="box7">
    </td>
    <td>+</td>
    <td>
      <input type="text" id="box8">
    </td>
    <td>=</td>
    <td>
      <input type="text" id="result4">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" id="box9">
    </td>
    <td>+</td>
    <td>
      <input type="text" id="box10">
    </td>
    <td>=</td>
    <td>
      <input type="text" id="result5">
    </td>
  </tr>
</table>
<button id="add">add</button>
<input type="text" id="final-result">
<input type="checkbox" id="final-check">

您可以添加任意数量的文本框并获得结果。

<div>
  <input type="text" class="textBox" value="0">
  <input type="text" class="textBox" value="0">
  <input type="text" class="resultBox" value="0">
</div>
<div>
  <input type="text" class="textBox" value="0">
  <input type="text" class="textBox" value="0">
  <input type="text" class="resultBox" value="0">
</div>
<div>
  <input type="text" class="textBox" value="0">
  <input type="text" class="textBox" value="0">
  <input type="text" class="resultBox" value="0">
</div>
<div>
  <input type="text" class="textBox" value="0">
  <input type="text" class="textBox" value="0">
  <input type="text" class="resultBox" value="0">
</div>
<div>
  <input type="text" class="textBox" value="0">
  <input type="text" class="textBox" value="0">
  <input type="text" class="resultBox" value="0">
</div>

<div>
  <input type="text" id="mainTotBox" value="0">
 </div>
$(".textBox").on("change", function(){
  var total = 0;
  var thisInput = this;
  $(this).closest("div").find("input[class='textBox']").each(function(index, inputEle){
    total += window.parseInt($(inputEle).val());
    $(thisInput).closest("div").find(".resultBox").val(total);
  });
  var mainTot = 0;
  $(".resultBox").each(function(index, inputEle){
    mainTot += window.parseInt($(inputEle).val());
  });
  $("#mainTotBox").val(mainTot);
});

<input type="text class="tb">
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="result" id="result">
<script>
var result=0;
// Loop thru each input field that has class tb, take its numeric value
// and add it to result
function AddEmUp()
{
   $("input.tb").each( 
   function() 
   {
     result=result+Number( $(this).val() );
   });
   // Display the result in input box with id=result
   $("#result").val( result);
}
// Execute AddEmUp when any one of the input fields with class tb is clicked
$("input.tb").click( AddEmUp );
</result>
相关文章：