Question

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

假设我有一个文本框，其中包含另外两个文本框的添加结果。

<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中的值。

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

Answer 1

假设文本框中的数字5保持不变，这是您的问题的解决方案。（没有验证）

＆＃13;

$("#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);
});

＆＃13;

<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">

＆＃13;

Answer 2

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

<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);
});

Answer 3

<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>

如何使用jQuery在另一个文本框中添加多个文本框的值？

3 个答案: