基於複選框的jQuery更新當前價格

Question

當客戶檢查其他選項時，我嘗試更新當前字段值。

我有幾個複選框，輸入不同值的字段。

<input type="checkbox" class="item-price-checkbox" name="equipment_1" value="20"> 
<input type="checkbox" class="item-price-checkbox" name="equipment_2" value="30"> 
<input type="checkbox" class="item-price-checkbox" name="equipment-3" value="50"> 

車的當前價格是100 $。當客戶檢查設備1時，它會將其價格增加到現有價格。所以在這種情況下，它將是100$ + 20$ = 120$。我的腳本無法正常工作。因爲當我檢查我沒有得到120我得到10020。所以添加不能正常工作。

var basePrice = $(".price_field").val(); 

$(".item-price-checkbox").change(function() { 
    var newPrice = basePrice; 

    $('.item-price-checkbox:checked').each(function() { 
     newPrice += $(this).val(); 
     // newPrice = newPrice + $(this).val(); 
    }); 

    $('.price_field').val(newPrice); 
}); 

Answer 1

嘗試將接收到的值轉換成number，

var basePrice = parseInt($(".price_field").val(),10); 

$(".item-price-checkbox").change(function() { 
    var newPrice = basePrice; 
    $('.item-price-checkbox:checked').each(function() { 
     newPrice += parseInt($(this).val(),10); 
    }); 
    $('.price_field').val(newPrice); 
}); 

基本上，.val()將字符串的形式返回類型的值。我們必須將其手動轉換爲數字。同時不要忘記在解析string到number時通過radix參數。如果你不這樣做，那麼轉換將按照提供的字符串不同發生。