JSFiddle - React, Tailwind, and code Playground
HTML
<form id="menu">
<label>
<span class='title'>Menu 1:</span>
<input type="checkbox" name="menu1" />
</label>
<label>
<span class='title'>Menu 2:</span>
<input type="checkbox" name="menu2" />
</label>
<label>
<span class='title'>Menu 3:</span>
<input type="checkbox" name="menu3" />
</label>
<label>
<span class='title'>Menu 4:</span>
<input type="checkbox" name="menu4" />
</label>
<label>
<span class='title'>Menu 5:</span>
<input type="checkbox" name="menu5" />
</label>
<label>
<span class='title'>Menu 6:</span>
<input type="checkbox" name="menu6" />
</label>
<label>
<span class='title'>Menu 7:</span>
<input type="checkbox" name="menu7" />
</label>
</form>
<div id="sub_total"></div>
CSS
#menu{
margin-left: 10px;
display: inline-block;
}
#menu label{
display:block;
margin-top: 5px;
border-bottom: 1px solid gray;
}
#menu label input, #menu .title{
vertical-align: middle;
}
#sub_total{
margin-top: 30px;
border-top: 2px dashed blue;
}
JavaScript
//Set the tax
var f_tax = 0.07,
i_menu_base = 5;
//Declare all the variables that will be used
var e_menu = document.getElementById("menu"),
e_checkboxes = e_menu.getElementsByTagName("input"),
e_subtotal = document.getElementById("sub_total");
// Add event listeners for when any checkbox changes value
for(var i = 0; i < e_checkboxes.length; i++){
e_checkboxes[i].onchange = function(){
//Recalculate subtotal
get_subtotal();
}
}
//get_subtotal calculates the subtotal based on which checkboxes are checked
function get_subtotal(){
var f_sub_total = 0.0,
f_grand_total = 0.0;
var subtotal, tax, grandtotal;
for(var i = 1; i <= e_checkboxes.length; i++){
//If the checkbox is checked, add it to the total
if(e_checkboxes[i-1].checked){
f_sub_total += i * i_menu_base
}
}
//Calculate the grand total
f_grand_total = f_sub_total*(1+f_tax);
//Format them
subtotal = (Math.round(f_sub_total*100)/100).toFixed(2);
tax = (Math.round(f_tax*10000)/100).toFixed(2);
grandtotal = (Math.round(f_grand_total*100)/100).toFixed(2);
//Add them to the element
e_subtotal.innerHTML = "Subtotal: "+subtotal+"<br />";
e_subtotal.innerHTML += "Tax: "+tax+"%<br />";
e_subtotal.innerHTML += "Total: "+grandtotal;
}