チェックボックスのデータ属性に入力値を掛けて

Question

チェックボックスをオンにするたびに、データ価格属性にチェックボックスに関連付けられた入力フィールドの値を掛けたいとします。これらの乗算の合計を計算する必要があります。

HTML：

<input class="selectproduct" type="checkbox" name="item0" data-price="5"/>First 
<input type="text" class="qty0" name="qty0"/> 
<br/> 
<input class="selectproduct" type="checkbox" name="item1" data-price="7"/>Second 
<input type="text" class="qty1" name="qty1"/> 
<br/> 
Total Price: $<span class="price">0</span> 

JS：

$('.selectproduct').on("change", function() { 
    var totalPrice = 0; 

    $('.selectproduct:checked').each(function() { 
     totalPrice += parseInt($(this).data('price'), 10); 
    }); 

    $('.price').html(totalPrice); 
}); 

私は現在、チェックボックスに応じて価格を合計することが、私は、関連する入力でそれを乗算する方法を見つけ出すことはできません変更がある場合は常にフィールドに入力します。入力フィールドが変わるたびに、どのように合計を更新するのですか？ https://jsfiddle.net/600rzptn/

Answer 1

あなたは、それは次のように行うことができます

はここでフィドルです。

$('.selectproduct').change(function() { 
 
    var totalPrice = 0; 
 

 
    $('.selectproduct:checked').each(function() { 
 
    totalPrice += $(this).data('price') * $(this).next('input').val(); 
 
    }); 
 

 
    $('.price').html(totalPrice); 
 
}); 
 

 
//to change total price on changing textbox value 
 
$('input[type="text"]').keyup(function() { 
 
    $('.selectproduct:first').change(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="selectproduct" type="checkbox" name="item0" data-price="5" />First 
 
<input type="text" name="qty0" /> 
 
<br/> 
 
<input class="selectproduct" type="checkbox" name="item1" data-price="7" />Second 
 
<input type="text" name="qty1" /> 
 
<br/> 
 
Total Price: $<span class="price">0</span>

Answer 2

変更あなたの計算行へ：

totalPrice += parseInt($(this).data('price'), 10) * $(this).next().val(); 

jsFiddle example