は、テキストボックス

Question

に量に依存し、私は次の表

<table> 
<tr style="background-color: silver;"> 
    <th>Check it</th> 
    <th>Estimate item</th> 
    <th>Quantity</th> 
    <th>Cost</th>    
</tr> 
<tr> 
    <td><input type="checkbox" value="450" /></td> 
    <td>Remove Tile</td> 
    <td><input type="text" value="1"></td> 
    <td>$450</td> 
</tr> 
<tr> 
    <td><input type="checkbox" value="550" /></td> 
    <td>Remove Tub</td> 
    <td><input type="text" value="1"></td> 
    <td>$550</td> 
</tr> 

<p>Calculated Price: $<input type="text" name="price" id="price" disabled /></p>

Table example を持っている私は、チェックボックスの値の合計を計算する方法が見つかりました：

<script> 
     $(document).ready(function() { 
      var $inputs = $('input[type="checkbox"]') 
      $inputs.on('change', function() { 
       var sum = 0; 
       $inputs.each(function() { 
        if(this.checked) 
         sum += parseInt(this.value); 
       }); 
       $("#price").val(sum); 
      }); 
     }); 
</script> 

質問は： ユーザーがテキストボックスで数量を更新する場合は、合計を更新する必要があります。 チェックボックスをチェックした前後に数量が変更されています。

したがって、[コスト]列の値はチェックボックスの値と同じです。私は "コスト"欄を変更したくありません。私は、合計価格」テキストボックス「のid =とテキストボックス」の表の下部に表示される必要があり

ケース：。 ユーザーは、最初のチェックボックス#priceが450 ユーザーで更新する必要があります確認第二のチェックボックス番号をチェックします1000 ユーザーをbenowすべき価格は、事前に1450の

おかげに更新されなければならない最初のcheckbox.Nowの#priceと行の2に数量を変更！

Answer 1

はこれを実現するために、あなたがすべきループ徹底したテーブル本体のコードを使用する行は

$('table tbody tr').each(function() 
{ 
    //do something 
}); 

を入力して、その欄のチェックボックスを見つけます。このコードが$tr.find('input[type="checkbox"]').is(':checked')を使用してチェックボックスがオンになっているかどうかを確認できます。行内にチェックボックスがあり、チェックされているかどうかをチェックします。

var $columns = $tr.find('td').next('td').next('td');このコードは、列Quantityを取得するために使用されます。

関数calculateSum()は、テキストボックス変更イベントとチェックボックス変更イベントの両方で、チェックされた行の合計を計算するために呼び出されます。

$(document).ready(function() { 
 

 
function calculateSum(){ 
 
var sumTotal=0; 
 
    $('table tbody tr').each(function() { 
 
     var $tr = $(this); 
 

 
     if ($tr.find('input[type="checkbox"]').is(':checked')) { 
 
      
 
     var $columns = $tr.find('td').next('td').next('td'); 
 
      
 
     var $Qnty=parseInt($tr.find('input[type="text"]').val()); 
 
var $Cost=parseInt($columns.next('td').html().split('$')[1]); 
 
     sumTotal+=$Qnty*$Cost; 
 
     } 
 
    }); 
 

 
     $("#price").val(sumTotal); 
 
     
 
} 
 

 
    $('#sum').on('click', function() { 
 
     
 
    calculateSum(); 
 
    }); 
 

 
    $("input[type='text']").keyup(function() { 
 
    calculateSum(); 
 

 
    }); 
 
    
 
    $("input[type='checkbox']").change(function() { 
 
    calculateSum(); 
 

 
    }); 
 

 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="sum" type="button">Calculate</button><br/> 
 

 
<table> 
 
    <tr style="background-color: silver;"> 
 
    <th>Check it</th> 
 
    <th>Estimate item</th> 
 
    <th>Quantity</th> 
 
    <th>Cost</th> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="checkbox" name="chck" value="450" /></td> 
 
    <td>Remove Tile</td> 
 
    <td><input type="text" name="qnty" value="1"></td> 
 
    <td>$450</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="checkbox" class="chck" value="550" /></td> 
 
    <td>Remove Tub</td> 
 
    <td><input type="text" name="qnty" value="1"></td> 
 
    <td>$550</td> 
 
    </tr> 
 
    </table> 
 
    
 
    <p>Calculated Price: $<input type="text" name="price" id="price" disabled /></p>

Answer 2

<div class="serve" id="service"> 

<form action="" id="roomform" onsubmit="return false"> 
<div class="order"> 
<fieldset> 
<legend>Tell us where to clean:</legend> 
<p> 
<input value="30" type="checkbox" id="myCheck" class="sum" name="myCheck" oninput="x.value=parseInt(bedroom.value)*30.00"/> 
<label for="sleeping" class="contain">Bedrooms (P30/room) </label> 
<input type="number" id="a" class="room" value="1" min="1" max="20" onchange="calculateTotal()"/> 
Total: P <span id="costPrice"> </span 
</p> 
<p> 
<input value="20" type="checkbox" id="myCheck" class="sum" name="myCheck1" onclick="calculateTotal()" /> 
<label for="sitting" class="contain">Sitting room (P20/room)</label> 
<input type="number" class="room" id="a" value="1" min="1" max="20" /> 
Total: P <output type="number" ></output> 
</p> 
<p> 
<input value="20" type="checkbox" id="myCheck" class="sum" onclick="calculateTotal()" /> 
<label class="contain">Dining room (P20/room)</label> 
<input type="number" class="room" id="a" value="1" min="1" max="20" /> 
Total: P <output type="number" ></output>  
</p> 

<p> 
Extra services:</p> 
<p> 
<input value="15" type="checkbox" id="myCheck" class="sum" onclick="calculateTotal()" /> 
    <label class="contain">Carpet Cleaning (P 15/room)</label> 
    <input type="number" class="room" id="a" value="0" min="0" max="20" /> 
Total: P <output type="number" ></output>  
</p> 
<p> 
<input value="3" type="checkbox" id="myCheck" class="sum" onclick="calculateTotal()" /> 
<label class="contain">Window Cleaning (P 3/room)</label> 
<input type="number" class="room" id="a" value="0" min="0" max="20" /> 
Total: P <output type="number" ></output> 
</p> 
<div class="grandPrice" > 
Grand Total Price: P<span id="grandTotal">0</span> 
</div> 
</fieldset>  
</div> 
    </form> 
<script> 
// When a checkbox is clicked 
/*$('#order input[type=checkbox]').click(function() { 
// Get user input and set initial variable for the total 
inputBox = parseInt($('#a').val()); 
bedroomPrices = 0; 

// If it's checked, add the current value to total 

    if($(this).prop('checked')) 
    { 
     thisValue = parseInt($(this).val()); 
     bedroomPrices = bedroomPrices + thisValue; 
    } 

// Output the total checkbox value multipled against user input 
$('#costPrice').html(bedroomPrices * inputBox);  
});*/ 

var checkbox = document.getElementsByClassName('sum'), 
inputBox = document.getElementById('a'), 
    GrandTotal = document.getElementById('grandTotal'); 

//"(this.checked ? 1 : -1);" this sees if checkbox is checked or unchecked by adding or subtracting it (1 :-1) 
//make sure that each checkbox total is added if its checked 
for (var i=0; i < checkbox.length; i++) { 
    checkbox[i].onchange = function() { 

     var add = this.value * (this.checked ? 1 : -1); 

     grandTotal.innerHTML = parseFloat(grandTotal.innerHTML) + add 

    } 
} 

</div> 

</body>