jQueryを使用して複数のテキストボックスの値を別の単一のテキストボックスに追加する方法は？

Question

初心者の方はこの説明で助けが必要です。

別の2つのテキストボックスを追加した結果を含む1つのテキストボックスがあるとします。

<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が同じままであると仮定すると、問題の解決方法があります。 （検証なし）

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

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>