JavaScriptがドロップダウンとチェックボックスから合計を計算

Question

複数のドロップダウンとチェックボックスから合計を計算したいと思います。 このコードはselect：optionのドロップダウンでうまく動作しますが、問題は入力をチェックして追加してしまうことです。ここで

私が使用するコードは次のとおりです。

$(window).load(function() { 
 
    var basePrice = 0; 
 

 
    $(".calculate").change(function() { 
 
    newPrice = basePrice; 
 
    $(".calculate option:selected").each(function() { 
 
     newPrice += parseFloat($(this).data('price')); 
 
     console.log(typeof newPrice); 
 
    }); 
 

 
    newPrice = newPrice.toFixed(2); 
 
    $("#item-price").html(newPrice); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="type2" name="service" class="calculate"> 
 
    <option data-price="0" value="">-- Select --</option> 
 
    <option data-price="100" value="kite1">wash</option> 
 
    <option data-price="150" value="kite1">wash and dry</option> 
 
    <option data-price="1000" value="kite2">repair</option> 
 
    </select> 
 

 

 
<input type="checkbox" class="calculate" data-price="300" name="vehicle" value="Bike">roof 
 
<input type="checkbox" class="calculate" data-price="200" name="vehicle" value="rims">rims 
 

 

 
<span id="item-price">0</span>

Answer 1

「だけ選択し、ドロップダウンと一緒にチェックボックスを計算し、それを必要とする」の説明のためのコメントをインラインで参照してください。

// Instead of window.load, you can get your function to run earlier 
 
// by setting it up for when the DOM is ready. As long as the function 
 
// doesn't rely on externally loaded content, this is generally a 
 
// better idea because the page becomes interactive quicker. 
 
// Do that by just passing your callback function to JQuery: 
 
$(function(){ 
 

 
    // You need to run the function when the select gets changed but also when the 
 
    // checkboxes get clicked. Now, you could use a simple selector to get references 
 
    // to all the elements in question here, but this could cause other elements that 
 
    // are not related to this operation to be erroneously included. It's better to 
 
    // be specific with selectors so that the code can scale. 
 
    // Also, modern JQuery recommends the use of the "on" method for event binding. 
 
    $("select.calculate").on("change", calc); 
 
    $("input[type=checkbox].calculate").on("click", calc); 
 
    
 
    function calc() { 
 
    var basePrice = 0; 
 
    newPrice = basePrice; 
 
    // You need to loop over, not only the selected option, but also the checked checboxes 
 
    $("select.calculate option:selected, input[type=checkbox].calculate:checked").each(function() { 
 
     newPrice += parseInt($(this).data('price'), 10); 
 
    }); 
 

 
    newPrice = newPrice.toFixed(2); 
 
    $("#item-price").html(newPrice); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="type2" name="service" class="calculate" > 
 
<option data-price="0" value="">-- Select --</option> 
 
<option data-price="100" value="kite1">wash</option> 
 
<option data-price="150" value="kite1">wash and dry</option> 
 
<option data-price="1000" value="kite2">repair</option> 
 
</select> 
 

 

 
<input type="checkbox" class="calculate" data-price="300" name="vehicle" value="Bike">roof 
 
<input type="checkbox" class="calculate" data-price="200" name="vehicle" value="rims">rims 
 

 

 
<span id="item-price">0</span>