[英]Multiply checkbox data attribute with input value
每次我選中任何復選框時,我都想將data-price屬性乘以與該復選框關聯的輸入字段的值。 我需要計算所有這些乘法的總和。
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/
您可以按照以下步驟進行操作。
$('.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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.