javascript calculate total from dropdown and checkbox

Question

I would like to calculate total from multiple dropdown and checkboxes . This code working fine for the select:option dropdown but my problem is adding the input checked to it.

Here is the code i use: " just need it to calculate the checked boxes along with the selected dropdown "

 $(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

See the comments inline for explanations:

 // 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>