After studying the animated image, it's only the dropdown box that changes the price.
I've added a total area at the bottom though, which makes things trickier.
First we start with the form, which is a dropdown list and some checkboxes
<form id="order">
<p>Item Price USD</p>
<p class="price">$59</p>
<select name="licenseType">
<option value="single">Single-Domain License</option>
<option value="5-domain">5 Domain License</option>
<option value="developer">Developer License</option>
</select>
<hr>
<h2>Recommended Add-On's</h2>
<p>
<input type="checkbox" name="installTheme"> Install Your WordPress Theme <span class="price">$49</span></p>
<p>
<input type="checkbox" name="amazingLooks"> Make My Wordpress Site Look Amazing <span class="price">$149</span></p>
<p>
<input type="checkbox" name="backupSite"> Backup Your Wordpress WebSite <span class="price">$99</span></p>
<p>Total = <span class="total">$59</span></p>
</form>
For the scripting, we keep it well behaved by putting it in an IIFE (immediately invoked function expression), and to sue strict mode, which helps to prevent common issues from occurring.
(function iife() {
"use strict";
// rest of code here
}());
We need to get several pieces of information from the form, so these functions help us to do that:
function getPriceEl(form) {
return form.querySelector(".price");
}
function getCheckboxes(form) {
return form.querySelectorAll("input[type='checkbox']");
}
function getCheckboxPrice(checkbox) {
return checkbox.parentNode.querySelector(".price").innerHTML;
}
function getTotalEl(form) {
return form.querySelector(".total");
}
Updating the price is a simple matter of using the index of the selected option, to pick a value from an array of prices.
function updatePrice(select, prices) {
var price = getPriceEl(select.form);
price.innerHTML = "$" + prices[select.selectedIndex];
}
We trigger that price update whenever the dropdown list is changed.
function updatePriceHandler(evt) {
var select = evt.target;
var form = select.form;
updatePrice(select, prices);
updateTotal(form);
}
var prices = [59, 236, 1475];
var form = document.querySelector("#order");
var select = form.elements.licenseType;
select.addEventListener("change", updatePriceHandler);
The prices we can get in any way such as by using an Ajax request, but I've just use an array for them here.
var prices = [59, 236, 1475];
When sending the form, it's vitally important that you do not send price information through to the server because we can not trust the client. Instead, send the form information through (the select and the checkboxes), and have the server calculate everything for itself as well.
Updating the total is made easier with the help of some helper functions:
function isChecked(checkbox) {
return checkbox.checked;
}
function priceToValue(price) {
return Number(price.split("$")[1]);
}
function sum(val1, val2) {
return val1 + val2;
}
We can now use those helper functions to make updating the total really easy.
The checkbox totals are the most difficult, but by filtering for only the checked checkboxes, we can reduce things down to a total from them:
function checkboxTotals(checkboxes) {
return Array.from(checkboxes)
.filter(isChecked)
.map(getCheckboxPrice)
.map(priceToValue)
.reduce(sum, 0);
}
And we can then incorporate that in the total for the whole form:
function updateTotal(form) {
var total = getTotalEl(form);
var dropdownPrice = priceToValue(getPriceEl(form).innerHTML);
var checkboxTotal = checkboxTotals(getCheckboxes(form));
var totalPrice = dropdownPrice + checkboxTotal;
total.innerHTML = "$" + totalPrice;
}
Which gets called from the updatePriceHandler() function that you saw above, and from a separate click handler on each checkbox:
function updateTotalHandler(evt) {
var form = evt.target.form;
updateTotal(form);
}
// ...
var checkboxes = getCheckboxes(form);
checkboxes.forEach(function addCheckboxHandler(checkbox) {
checkbox.addEventListener("click", updateTotalHandler);
});
All together, the code looks like this:
(function iife() {
"use strict";
function getPriceEl(form) {
return form.querySelector(".price");
}
function getCheckboxes(form) {
return form.querySelectorAll("input[type='checkbox']");
}
function getCheckboxPrice(checkbox) {
return checkbox.parentNode.querySelector(".price").innerHTML;
}
function getTotalEl(form) {
return form.querySelector(".total");
}
function updatePrice(select, prices) {
var price = getPriceEl(select.form);
price.innerHTML = "$" + prices[select.selectedIndex];
}
function isChecked(checkbox) {
return checkbox.checked;
}
function priceToValue(price) {
return Number(price.split("$")[1]);
}
function sum(val1, val2) {
return val1 + val2;
}
function checkboxTotals(checkboxes) {
return Array.from(checkboxes)
.filter(isChecked)
.map(getCheckboxPrice)
.map(priceToValue)
.reduce(sum, 0);
}
function updateTotal(form) {
var total = getTotalEl(form);
var dropdownPrice = priceToValue(getPriceEl(form).innerHTML);
var checkboxTotal = checkboxTotals(getCheckboxes(form));
var totalPrice = dropdownPrice + checkboxTotal;
total.innerHTML = "$" + totalPrice;
}
function updatePriceHandler(evt) {
var select = evt.target;
var form = select.form;
updatePrice(select, prices);
updateTotal(form);
}
function updateTotalHandler(evt) {
var form = evt.target.form;
updateTotal(form);
}
var prices = [59, 236, 1475];
var form = document.querySelector("#order");
var select = form.elements.licenseType;
var checkboxes = getCheckboxes(form);
select.addEventListener("change", updatePriceHandler);
checkboxes.forEach(function addCheckboxHandler(checkbox) {
checkbox.addEventListener("click", updateTotalHandler);
});
}());
And a working example (without the CSS to make it look pretty) is found at https://jsfiddle.net/nyyL3tw4/2/
