2017-01-16 4 views
2
$(document).ready(function() { 
    $(':checkbox').change(function() {   
     $('input:checkbox:checked').filter(function() { 
      var sum = 0;   
      var Something = parseFloat($(this).closest('tr').find('td:eq(2)').text()) + sum; 
      var value = Something; 
      alert(Something); 
      $('#total').html(value); 
     }); 
    }); 
}); 
<table class="table table-bordered" id="echotable"> 
    <tr> 
     <th class="field-label col-xs-1 primary">ID</th> 
     <th class="field-label col-xs-5 primary">Name Of Service</th> 
     <th class="field-label col-xs-3 primary">Price</th> 
     <th class="field-label col-xs-3 primary">Total</th> 
    </tr> 
    <?php foreach($echo_details as $post){?> 
     <tr class="active" id="myrow"> 
      <td class="field-label col-xs-1 primary"><?php echo $post->echo_id;?></td> 
      <td class="field-label col-xs-5 primary"><?php echo $post->echo_scan;?></td>  
      <td class="field-label col-xs-3 primary" id="price"><?php echo $post->price;?></td> 
      <td class="field-label col-xs-3 primary"><input type="checkbox" id="myCheckbox" /></td> 
     </tr> 
    <?php }?> 
    <tr> 
     <td colspan="3" class="total"><strong>TOTAL</strong></td> 
     <td id="total"></td> 
    </tr> 

を計算します。ユーザーが複数のチェックボックスを選択すると、すべての価格値が取得されます。今私はすべての価格の値を追加する必要があり、総コストで表示する必要があります。どうやってやるの?を動的に選択した複数の値を追加し、私は動的にデータベースから値を取得しています合計

enter image description here

+0

HTML:これを試してみてください。クラスを使用するには 'price'と' myCheckbox'を変更する必要があります –

答えて

2

あなたのロジックはかなり正確ではありません。 filter()ではなく、チェックボックスをループするにはeach()を使用する必要があります。また、ループの外側にsumを定義し、ループの終了時にhtml()の '合計'をtdに設定する前に、各繰り返し内で追加する必要があります。最後に、合計td要素にclassを設定してください。idではなく、.totalではなく#totalを選択してください。あなた `foreach`ループはあなたのHTMLが無効になってされている、属性id``同じで複数の要素を作成している中で

$(':checkbox').change(function() { 
 
    var sum = 0; 
 
    $('input:checkbox:checked').each(function() { 
 
    sum += parseFloat($(this).closest('tr').find('td:eq(2)').text()); 
 
    }); 
 
    $('.total').html(sum); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>ID</th> 
 
    <th>Name Of Service</th> 
 
    <th>Price</th> 
 
    <th>Total</th> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>Echo</td> 
 
    <td>1000</td> 
 
    <td><input type="checkbox" /></td> 
 
    </tr> 
 
    <tr> 
 
    <td>2</td> 
 
    <td>Fetal Echo</td> 
 
    <td>1500</td> 
 
    <td><input type="checkbox" /></td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="3">TOTAL</td> 
 
    <td class="total">0</td> 
 
    </tr> 
 
</table>

+0

ありがとうございました...それは働きました.. – user5370838

+0

ええ、確かに解決策を得るために苦労しました.. – user5370838

関連する問題